2022-06-15 jQuery事件委托解决绑定事件无法响应后续加入的节点的bug

问题描述

代码

<div id="box"></div>
<script>
    var arr = [111, 2222, 33333];
    for (var i = 0; i < arr.length; i++) {
        $(`<li>${arr[i]}<button>删除</button></li>`).appendTo("#box");
    }
    $("#box button").click(function() {
        // console.log($(this).parent());
        $(this).parent().remove();
    })
</script>

结果

三个节点可以正常被删除
此时添加一个新节点444444:

$(`<li>444444<button>删除</button</li>`).appendTo("#box");

发现新增的button不能删除父节点li和它本身:

原因

在这段代码中:

    var arr = [111, 2222, 33333];
    for (var i = 0; i < arr.length; i++) {
        $(`<li>${arr[i]}<button>删除</button></li>`).appendTo("#box");
    }
    $("#box button").click(function() {
        // console.log($(this).parent());
        $(this).parent().remove();
    })

执行顺序是从上到下执行,找到当前所有存在的button进行绑定,而对后续添加的button没有绑定上事件

解决方法

事件委托:只有子节点时button的时候才把点击事件委托给它

代码

var arr = [111, 2222, 33333];
for (var i = 0; i < arr.length; i++) {
    $(`<li>${arr[i]}<button>删除</button></li>`).appendTo("#box");
}
$("#box").on("click", "button", function() { //on(事件名,节点名,执行函数)
    $(this).parent().remove();
});

结果

后续添加的节点可以正常被删除