动态给按钮绑定事件
<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()
})