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()); 
});