jQuery - 给动态创建的元素添加事件绑定（给js新插入元素添加click事件）
作者：hangge | 2018-06-26 08:10
1，问题描述
（1）这里以点击事件为例，通过 click() 方法给页面上所有的“删除”按钮添加个点击响应。要注意的是，“删除”按钮除了页面上原有的之外，还可以通过代码动态插入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
//新增按钮点击响应
$('#addBtn').click(function(){
//添加一个新条目
$('ul').append('<li>动态新增条目' +
' <button class="delBtn" type="button">删除</button></li>');
});
//删除按钮点击响应
$('.delBtn').click(function(){
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button id="addBtn" type="button">新增</button>
<ul>
<li>原有的条目 <button class="delBtn" type="button">删除</button></li>
<li>原有的条目 <button class="delBtn" type="button">删除</button></li>
</ul>
</body>
</html>
（2）运行程序可以发现，对于原先就存在的 HTML 页面元素，点击其身后的“删除”按钮就会被删除。而动态添加的 HTML 元素，点击“删除”按钮无法删除。
2，解决办法
使用 on() 方法代替 click() 方法来给“删除”按钮添加点击事件。因为使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
on() 和 click() 的区别:
- 二者在绑定静态控件时没有区别。
- 但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
//新增按钮点击响应
$('#addBtn').click(function(){
//添加一个新条目
$('ul').append('<li>动态新增条目' +
' <button class="delBtn" type="button">删除</button></li>');
});
//删除按钮点击响应
$('ul').on('click', '.delBtn', function(){ //只要改这一行就可以了
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button id="addBtn" type="button">新增</button>
<ul>
<li>原有的条目 <button class="delBtn" type="button">删除</button></li>
<li>原有的条目 <button class="delBtn" type="button">删除</button></li>
</ul>
</body>
</html>
全部评论（0）