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 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17492.html