这篇文章主要介绍了jQuery动态添加元素后元素注册事件失效如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jQuery动态添加元素后元素注册事件失效如何解决文章都会有所收获，下面我们一起来看看吧。
正常逻辑的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
button {
position: relative;
left: 712px;
top: 97px;
}
.content {
width: 500px;
height: 30px;
line-height: 30px;
border: 1px solid #bbb;
margin: 100px auto;
border-collapse: collapse;
}
th {
background-color: rgb(27, 126, 184);
color: #fff;
border: 1px solid #bbb;
}
td {
border: 1px solid #bbb;
}
</style>
</head>
<body>
<button>添加数据</button>
<table class="content" align="center">
<tr>
<th >课程名称</th>
<th >所属学院</th>
<th >已学会</th>
</tr>
</table>
<script>
$(function() {
var t1 = $('<tr align="center"><td>javaScript</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">GET</a></td></tr>');
var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
$('button').on('click', function() {
// console.log($('table tr'));
if ($('table tr').length === 1) {
$('table').append(t1);
console.log($(".del"));
// console.log($('table tr').length);
} else if ($('table tr').length === 2) {
$('table').append(t2);
} else if ($('table tr').length === 3) {
$('table').append(t3);
} else if ($('table tr').length === 4) {
$('table').append(t4);
} else {
return false;
}
});
// $("table a").on('click', function() {
// $('table').children('tr').remove();
// })
$('tr').on('click', 'a', function() {
console.log(11);
$(this).parents('tr').remove();
})
})
</script>
</body>
</html>前端页面操作流程：
1.先点击“添加数据”按钮，把a标签动态生成出来。
2.再点击a标签（GET），查看控制台。
结果：控制台啥也没有输出
因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
button {
position: relative;
left: 712px;
top: 97px;
}
.content {
width: 500px;
height: 30px;
line-height: 30px;
border: 1px solid #bbb;
margin: 100px auto;
border-collapse: collapse;
}
th {
background-color: rgb(27, 126, 184);
color: #fff;
border: 1px solid #bbb;
}
td {
border: 1px solid #bbb;
}
</style>
</head>
<body>
<button>添加数据</button>
<table class="content" align="center">
<tr>
<th >课程名称</th>
<th >所属学院</th>
<th >已学会</th>
</tr>
</table>
<script>
$(function() {
var t1 = $('<tr align="center"><td>javaScript</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">GET</a></td></tr>');
var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >GET</a></td></tr>');
$('button').on('click', function() {
// console.log($('table tr'));
if ($('table tr').length === 1) {
$('table').append(t1);
console.log($(".del"));
// console.log($('table tr').length);
} else if ($('table tr').length === 2) {
$('table').append(t2);
} else if ($('table tr').length === 3) {
$('table').append(t3);
} else if ($('table tr').length === 4) {
$('table').append(t4);
} else {
return false;
}
});
// $("table a").on('click', function() {
// $('table').children('tr').remove();
// })
$('.content').on('click', 'a', function() {
console.log(11);
$(this).parents('tr').remove();
})
})
</script>
</body>
</html>前端页面操作流程：
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虽然可以给未来动态创建的元素绑定事件，但是要先获取已拥有的父级元素。然后才能再获取动态元素。
就是相当于说，给父元素添加一个事件（该事件类型和动态元素想要实现的事件类型一样）
所以这里可以得到：
<table class="content" align="center"> <tr> <th >课程名称</th> <th >所属学院</th> <th >已学会</th> </tr> // 动态添加的元素 <tr align="center"> <td>javaScript</td> <td>传智播客-前端与移动开发学院</td> <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">GET</a></td> </tr> </table>
.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动态添加元素后元素注册事件失效如何解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
