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

Question

例如，

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

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

.on（）用click事件處理程序綁定“tr”。 第一個選擇子項並直接注冊click事件處理程序。 第二個選擇父“tbody”，並選擇子“tr”作為參數。

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

Answer 1

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

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

$(selector).method(arguments);

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

當你使用帶有選擇器的.on()作為第二個參數時，例如

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

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

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

Answer 2

可以說，兩者都不是真正的dynamic 。

以下將onclick事件綁定到頁面上的每個#dataTable tbody tr ：

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

另一個將onclick事件綁定到頁面上的每個#dataTable tbody ， 只有當其中一個被點擊的后代符合選擇器tr ，該事件才會觸發（請參閱事件委派 ）：

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

第二個可以被認為是動態的，因為它模擬指定選擇器的onclick，無論綁定時是否存在任何這些元素。 但從技術上講，這是一個附加到#dataTable tbody的事件。