例如，
$( "#dataTable tbody tr" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});
.on（）将click事件处理程序绑定到“ tr”。第一个选择子项并直接注册click事件处理程序。第二个选择父项“ tbody”，并选择子项“ tr”作为参数。
它们都是动态绑定吗？它们有相同的效果吗？两者有什么区别？
不，只有第二个版本是动态绑定。
它应该很容易理解。当您有如下代码时：
$(selector).method(arguments);
jQueryselector在执行代码时查找与匹配的所有元素，然后method在它们上调用。如果在首次加载页面时执行此代码，它将仅在初始文档中找到与选择器匹配的元素。如果tr动态添加元素，则第一个版本将找不到它们，因此不会将click事件绑定到它们。
当使用.on()选择器作为第二个参数时，例如
$(outerSelector).on(event, innerSelector, function...);
它的工作原理如下。它找到所有匹配的元素outerSelector，并将事件的处理程序绑定到它们。这些元素必须在调用时存在.on()。事件发生时，处理程序将检查目标是否匹配innerSelector，然后执行您的回调函数。这样，事件就可以在动态添加的元素上运行。
因此，一般规则是outerSelector应引用文档中的静态元素，而应innerSelector引用动态元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句