Question

例如，

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

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

.on（）绑定＆＃34; tr＆＃34;使用click事件处理程序。第一个选择子项并直接注册click事件处理程序。第二个选择父母＆＃34; tbody＆＃34;，并选择孩子＆＃34; tr＆＃34;作为一个论点。

它们都是动态绑定吗？他们有同样的效果吗？这两者有什么区别？

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，该事件将仅触发（参见Event Delegation）：

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

第二个可以被认为是动态的，因为它模拟了指定选择器的onclick，无论绑定时是否存在任何这些元素。但从技术上讲，这是一个附加到#dataTable tbody的事件。

jquery动态绑定.on（）选择父母还是孩子？

2 个答案: