您现在的位置是:网站首页 > 心得笔记
jquery点击事件失效的原因和解决办法
简介在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在给动态添加的元素使用点击事件的上面
例如:给 #demo 动态添加li元素 再给li绑定点击事件
$("#demo").append('<li>动态添加的第一个li元素</li>');
给li元素绑定点击事件
// 示范一 $("#demo li").click(function(){ alert($(this).html()); }); // 示范二 $("#demo li").on('click',function(){ alert($(this).html()); });
通过实践,这两种绑定方式,都不能够触发动态添加后的li元素实现点击!
动态生成的标签绑定的点击事件点击了没反应?
推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。
那么,我们应该使用什么来绑定动态元素呢?
支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。
例如
$("#demo").on('click', 'li',function(){ alert($(this).html()); }); // 或者 $(document).on('click', 'li',function(){ alert($(this).html()); });