Jquery.on与doubleclick事件

为什么会这样工作：

$(document).on("dblclick", "#areaA tr:has(td)", function(e) { //code here }); 

而这不

 $("#areaA tr:has(td)").on('dblclick', function(e) { //Code here }); 

我完全按照jquery文档页面上的示例，但我的双击不会触发。 当我这样做的第一种方式，它的作品，但似乎是两次火灾的事件。

这是在一个Kendo UI网格的上下文中。

这两段代码真的有区别吗？

Answer 1

主要区别在于每次点击时都会检查第一个条件。 因此，如果dynamic添加ID为areaA或tr或td的元素，则只有第一个可以工作。

Answer 2

这两段代码真的有区别吗？

是。 第一部分代码是委托事件处理的一种forms，其中处理器由被后代元素触发的文档冒泡事件触发。 第二个是将事件处理程序绑定到由jQuery为指定select器返回的实际元素（在这种情况下为#areaA tr:has(td) ）。

以下是jQuery文档中的相关信息：

第一段代码：

委托事件的优点是，他们可以处理后来添加到文档中的后代元素的事件。 通过select在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。

第二块代码：

事件处理程序仅绑定到当前选定的元素; 他们必须在您的代码调用.on（）时存在

Answer 3

你描述的第一种方法是因为你select了一个静态的父项，然后是一个dynamic的子项，它遵循了使用.on方法将事件绑定到dynamic创build元素的规则。

.on方法的语法.on ，这听起来像你已经做了一些研究。

 $(selector).on(event,childSelector,data,function,map) 

因此，如果我想用.on绑定到一个dynamic元素，我必须要美元符号先select一个静态父元素，然后在.on方法中selectdynamic子元素。 在你的情况下，正确的用例就像这样工作：

 $("body").on('dblclick', '#areaA tr:has(td)', function(e) { //Code here }); 

既然你提到它不工作，我假设#areaA不是一个静态元素。 你可以replace一个更相关的静态元素的身体，或只是离开它的身体，这并不重要。