關於jQuery獲取不到動態添加的元素節點的問題

 

遇到問題：

當我獲取 $("#art-list")頁面元素后去在后面追加標簽的時候（append），在下面用 $(selector) 獲取剛剛添加的標簽，發現怎么都獲取不到。

問題起因：

因為頁面已經將JS加載完畢，此時新增請求動態添加節點，自然獲取不到。

解決方案：

在網上查閱資料后發現動態添加的標簽要事件委托才能獲取到節點，也就是說要用：

$(selector).on(events,[selector],[data],fn)

屬性解析：

參數	描述
events	一個或多個用空格分隔的事件類型和可選的命名空間
selector	可選。一個選擇器字符串，用以過濾選定的元素，該選擇器的后裔元素將調用處理程序。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data	可選。作為event.data屬性值傳遞給事件對象的額外數據對象以供事件處理函數處理
fn	該事件被觸發時執行的函數。 false值也可以做一個函數的簡寫，返回false

這樣我獲得追加元素的父節點之后，就可以在里面調用子節點了：

$("#art-list").on('mouseenter', function () {
    $(".text-white").click(function() {
        alert(123);
    })
});

 

（.text-white就是在#art-list節點內動態添加的節點）

也可以用另一種簡單的寫法：

$("#art-list").on('click', '.text-white', function () {
        alert(123);
});

 

注意：
1. #art-list 為動態添加節點的父級節點，請使用非動態添加的父級節點，不然同樣獲取不到。
e.g. : 在<div class = "a"></div>中動態添加點擊節點：

<div class="b">
    <a class="c"></a>
</div>

 

請將父節點委托為 #a 而不能委托為 #b

2. 請委托給直接上級非動態添加節點，不要擴大范圍
還是上面那個例子，正確寫法應為：

$(".a").on('click', '.c', function () {
        alert(123);
})

 

請不要寫為：

$(div).on('click', '.c', function () {
        alert(123);
});

 

 

這樣可能會造成一次點擊多次執行情況！