发现问题
在使用jQuery绑定点击事件的时候,如果被绑定的元素是动态添加的,大概率会出现点击无效的情况。
例如:给testdiv里动态添加li元素并给li绑定点击事件:
// 动态添加li元素
$("#testdiv").append('<li>点我测试</li>');
// 给li元素绑定点击事件-Click绑定
$("#testdiv li").click(function(){
alert($(this).html());
});
// 给li元素绑定点击事件-on绑定
$("#testdiv li").on('click',function(){
alert($(this).html());
});
这两种绑定方式,点击发现都不能够触发动态添加后的li元素。
动态生成的标签事先绑定的点击事件点击了没反应。
分析原因
推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。
解决方法
支持给动态元素和属性绑定事件的是live和on,其中live在jQuery1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。
// 代码一:
$("#testdiv").on('click', 'li',function(){
alert($(this).html());
});
// 代码二:
$(document).on('click', '#testdiv li',function(){
alert($(this).html());
});
更多推荐
jquery点击事件失效原因和解决办法
发布评论