jQuery.on與家長和孩子選擇VS只是孩子選擇

Question

我使用jQuery 2.0.3

的使用是有什麼區別：

$(parentSelector).on("click", childSelector, function() {...}); 

和

$(childSelector).on("click", function() {...}); 

爲什麼我曾經想用前者而不是後者？

Answer 1

第一個被稱爲事件委託，如果您childSelector元素添加到DOM 後，

• 第一個將工作（新加入的元素有事件處理程序） - JSFiddle。
• 但第二個不會（新添加的元素沒有任何事件處理程序） - JSFiddle。從jQuery's .on() Documentation

Answer 2

示例代碼：

考慮一個表1000行。下面附加一個處理程序1000個元素：

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

這將工作，但如果我們添加行，我們不得不再次附上事件處理程序。

隨着委派方法中，事件處理程序僅附接至tbody，事件僅必須冒泡從tr到tbody：

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