自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库——摘自菜鸟教程（http://www.runoob.com/jquery/event-on.html）。
在做项目的时候有时候遇到加载更多的时候，我们以前的做法是在动态加载的html里面采用onclick时间绑定方法，这样做比较繁琐，后期项目新手采用在加载更多之后重新再加载事件方法，而导致了原先存在html里面的那些事件每次都会触发2次。然后我google了一下，采用on方法可以避免该问题，思路就是将新生成的元素类的事件委托给一开始就存在的父容器进行处理。假设动态插入的div类名是.child,他们的父容器id是#parent.
$('#parent').on('click', '.child', function() {
console.log('新旧插入的子元素的的点击事件都会冒泡到parent后进行处理，因此不需要插入后再重新绑定事件');
})
<body>
<div class="test">
<div class="div1">
<span>测试</span>
</div>
</div>
<button class="more">加载更多</button>
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script>
$(function(){
$(".test").on("click",'.div1',function(){
alert("aaa");
});
$(".more").on("click",function(){
var str = "";
$.getJSON("test.json",function(data){
$.each(data,function(infoIndex,info){
str += "<div class='div1'><span>"+info.email+"</span></div>";
});
$(".test").append(str);
});
});
});
</script>
</body>[
{
"email":"zhangguoli@123.com"
},
{
"email":"zhangtieli@123.com"
},
{
"email":"zhenjie@123.com"
}
]
测试可行~不知道什么情况，反正贴图没办法显示图片。~~~还搞不懂~~~
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
