jQuery动态添加元素后元素注册事件失效解决

目录

前言：

近日丢酱在学jQuery，在学习的时候遇到了一个问题，虽然最后解决了，但是丢酱觉得要把这个问题解决的方法记录下来，这样有小伙伴遇到同样的问题就不会跟我一样解决好久啦。
我先贴一段正常逻辑的代码

 

    
    
    
    
    
    


    添加数据
    

        

            
课程名称
            
所属学院
            
已学会
        
    
    

前端页面操作流程：

• 1.先点击“添加数据”按钮，把a标签动态生成出来。
• 2.再点击a标签（GET），查看控制台。

结果：控制台啥也没有输出

因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释

    
    
    
    
    
    


    添加数据
    

        

            
课程名称
            
所属学院
            
已学会
        
    
    

前端页面操作流程：

• 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添加元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！