jQuery 新添加元素事件綁定無效

 

jQuery中事件綁定，大多使用on就足夠了。

但是對於新添加的元素 on 的綁定事件 會不起作用。

因為 append 中的 節點是在整個文檔加載之后才添加的，頁面並不會為未來的元素初始化添加點擊事件，因此 這種方式添加的 節點的點擊事件是無效的。

解決方法：

事件委托。事件委托就是利用事件冒泡的原理，把事件添加到父元素或祖先元素上，觸發執行效果。

原代碼：

$('#ul li').on('click', function() {
    alert($(this).html())
})

修改為：

$(document).on('click', '#ul li', function() {
    alert($(this).html())
})