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

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

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

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

。对（）结合 “TR” 与点击事件处理程序。第一个选择儿童并直接注册点击事件处理程序。第二个选择父母“tbody”，并选择孩子“tr”作为参数。

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

来源

2014-09-04 Matilda Yi Pan

不，只有第二个版本是动态绑定。

它应该很容易理解。当你有一个这样的代码：

$(selector).method(arguments);

jQuery的找到所有你执行代码的时间匹配selector的元素，并在那个时候叫上他们method。如果您在第一次加载页面时执行此代码，则它只会查找与初始文档中的选择器匹配的元素。如果动态添加tr元素，则第一个版本不会找到它们，因此它不会将click事件绑定到它们。

当您使用.on()并将选择器作为第二个参数时，例如，

$(outerSelector).on(event, innerSelector, function...);

它的工作原理如下。它找到匹配outerSelector的所有元素，并将事件的处理程序绑定到它们;当您致电.on()时，这些元素必须存在。事件发生时，处理程序检查目标是否匹配innerSelector，然后执行回调函数。这是它允许事件在动态添加元素上工作的方式。

所以一般规则是outerSelector应该引用文档中的静态元素，而innerSelector引用动态元素。

来源

2014-09-04 01:38:44 Barmar

可以这么说，它们都不是真的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*/ });

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

来源

2014-09-04 01:33:39 Stryner

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

回答

相关问题