<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>冒泡</title>
载入jq
<script src="jquery.min.js" type="text/javascript"></script>
<style>
#demo{width:100px;height:100px;background:green;}
#demo1{width:50px;height:50px;background:red;}
#layui-icon-down{width:50px;height:50px;background:red;}
</style>
</head>
<body>
<div id='demo'></div>
<div id='addend'></div>
<div class='layui-icon-down'>更多</div>
</body>
<script>
// 添加一个div id为demo1
$('#demo').click(function(){
$(this).html("<div id='demo1'></div")
$('#addend).addend("<div class='addend1'></div")
})
// 创建的div添加点击事件 #demo是#demo1的父级
$('#demo').on('click','#demo1',function(){
console.log('点击')
})
// 创建的div添加点击事件 #addend是.addend1的父级
$('#addend').on('click','.addend1',function(){
console.log('点击1')
})
$(document).on('click','.layui-icon-down',function(e){
console.log(22)
$(this).removeClass('layui-icon-down').addClass('layui-icon-up').text('收起');
})
$(document).on('click','.layui-icon-up',function(e){
console.log(11)
$(this).removeClass('layui-icon-up').addClass('layui-icon-down').text('更多');
})
</script>
</html>
5895
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
