jquery動態綁定.on（）選擇父母還是孩子？

例如，jquery動態綁定.on（）選擇父母還是孩子？

$("#dataTable tbody tr").on("click", function() { 
    alert($(this).text()); 
}); 

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
});

。對（）結合「TR」與點擊事件處理程序。第一個選擇兒童並直接註冊點擊事件處理程序。第二個選擇父母「tbody」，並選擇孩子「tr」作爲參數。

它們都是動態綁定嗎？他們有相同的效果嗎？這兩者有什麼區別？

來源

2014-09-04 Matilda Yi Pan

不，只有第二個版本是動態綁定。

它應該很容易理解。當你有一個這樣的代碼：

$(selector).method(arguments);

jQuery的找到所有你執行代碼的時間匹配selector的元素，並在那個時候叫上他們method。如果您在第一次加載頁面時執行此代碼，則它只會查找與初始文檔中的選擇器匹配的元素。如果動態添加tr元素，則第一個版本不會找到它們，因此它不會將click事件綁定到它們。

當您使用.on()並將選擇器作爲第二個參數時，例如，

$(outerSelector).on(event, innerSelector, function...);

它的工作原理如下。它找到匹配outerSelector的所有元素，並將事件的處理程序綁定到它們;當您致電.on()時，這些元素必須存在。事件發生時，處理程序檢查目標是否匹配innerSelector，然後執行回調函數。這是它允許事件在動態添加元素上工作的方式。

所以一般規則是outerSelector應該引用文檔中的靜態元素，而innerSelector引用動態元素。

來源

2014-09-04 01:38:44 Barmar

可以這麼說，它們都不是真的dynamic。

將onclick事件的每一個#dataTable tbody tr綁定頁面以下幾點：

$("#dataTable tbody tr").on("click", function() { /*event*/ });

另將綁定onclick事件的每一個#dataTable tbody在頁面上，並且該事件將只有火如果一個其後代點擊滿足選擇tr（見Event Delegation）：

$("#dataTable tbody").on("click", "tr", function() { /*event*/ });

第二可被視爲動態的，因爲它模擬了在t一個onclick他指定了選擇器，在綁定時是否存在任何這些元素。但從技術上講，這是附於#dataTable tbody的事件。

來源

2014-09-04 01:33:39 Stryner

jquery動態綁定.on（）選擇父母還是孩子？

回答

相關問題