jQuery.on与父子选择器和子选择器一起使用

Question

我正在使用jQuery 2.0.3

之间有什么区别：

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

和

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

为什么我会想要使用前者而不是后者？

Answer 1

第一个称为事件委派，如果您的childSelector元素添加到DOM 以后，

• 第一个将起作用（新添加的元素具有事件处理程序） - JSFiddle。
• 但第二个赢了（新添加的元素没有任何事件处理程序） - JSFiddle。

Answer 2

jQuery's .on() Documentation的示例代码：

考虑一个包含1000行的表。以下将处理程序附加到1000个元素：

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

这会有效，但如果我们添加行，我们会再次附加事件处理程序。

使用委派方法，事件处理程序仅附加到tbody，事件只需从tr冒出来tbody：

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