jquery点击事件失效怎么办?

jquery点击事件失效怎么办?下面本篇文章给大家介绍一下jquery点击事件失效原因和解决办法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候

例如:给demo里添加li元素给li绑定点击事件

$("#demo").append('<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());
});

更多web开发知识,请查阅 HTML中文网 !!

以上就是jquery点击事件失效怎么办?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏