这篇文章主要介绍了jQuery动态添加元素后元素注册事件失效解决,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
前言:
近日丢酱在学jQuery,在学习的时候遇到了一个问题,虽然最后解决了,但是丢酱觉得要把这个问题解决的方法记录下来,这样有小伙伴遇到同样的问题就不会跟我一样解决好久啦。
我先贴一段正常逻辑的代码
Document
课程名称 | 所属学院 | 已学会 |
---|
前端页面操作流程:
- 1.先点击“添加数据”按钮,把a标签动态生成出来。
- 2.再点击a标签(GET),查看控制台。
结果:控制台啥也没有输出
因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释
Document
课程名称 | 所属学院 | 已学会 |
---|
前端页面操作流程:
- 1.先点击“添加数据”按钮,把a标签动态生成出来。
- 2.再点击a标签(GET),查看控制台。
**结果:控制台开始输出了 **
开始作解释了。其实大家可以看出来,这里只有一个区别。我把这两个贴出来
// 控制台不输出 // 通过on事件委派来给tr里面的a标签添加点击事件 $('tr').on('click', 'a', function() { console.log(11); $(this).parents('tr').remove(); }); // 控制台输出 $('.content').on('click', 'a', function() { console.log(11); $(this).parents('tr').remove(); });
第一个里,我们是事件委派对a标签的元素作单击事件。但是这种jquery获取不到动态添加元素的。
方案解释:
on虽然可以给未来动态创建的元素绑定事件,但是要先获取已拥有的父级元素。然后才能再获取动态元素。
就是相当于说,给父元素添加一个事件(该事件类型和动态元素想要实现的事件类型一样)
所以这里可以得到:
课程名称 | 所属学院 | 已学会 |
---|---|---|
javaScript | 传智播客-前端与移动开发学院 | GET |
.content是a标签的父级
$('.content').on('click', 'a', function() { console.log(11); $(this).parents('tr').remove(); })
只要记住,在动态生成的元素中,不能直接指定其事件。只能其父标签的事件后,过滤指定特定元素事件。
还有一种写法:直接指定dom的元素事件。这也是可以的。
$(document).on('click',"a",function(){ console.log("22"); })
到此这篇关于jQuery动态添加元素后元素注册事件失效解决的文章就介绍到这了,更多相关jQuery添加元素内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!
以上就是jQuery动态添加元素后元素注册事件失效解决的详细内容,更多请关注0133技术站其它相关文章!