文章讲述了如何在JavaScript中，特别是使用jQuery时，通过事件委托来处理动态添加的按钮的点击事件。当动态生成新的按钮时，使用事件委托可以避免每次添加新按钮都要重新绑定事件，提高了代码的效率和维护性。示例代码展示了如何将删除按钮的事件绑定到父元素`#list`上，以便在点击任何列表内的删除按钮时，都能触发对应的操作，即删除该按钮的父`li`元素。
动态给按钮绑定事件
<ul id="list"></ul>
<script>
var arr=["111","222","333"]
for (var i=0;i<arr.length;i++){
$(`<li>${arr[i]}
<button>del</button>
</li>`).appendTo($("#list"))
}
$("#list button").click(function(){
console.log(this)
$(this).parent().remove()
})
但是如果我们在后续向页面添加按钮时
$(`<li>11111
<button>del</button>
</li>`).appendTo($("#list"))
}
再点击按钮时不会触发删除按钮事件，因为给按钮绑定事件的事情早已做完。我们得重新给按钮绑定事件。如果利用事件委托机制 ，则不需要再给按钮绑定事件，代码如下
$("#list").on("click","button",function(){
$(this).parent().remove()
})
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
