带有双击事件的Jquery.on

为什么这会起作用：

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

但事实并非如此

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

我完全按照jquery文档页面上的示例进行操作，但是我的双击没有触发。当我用第一种方式做的时候，它是有效的，但似乎它触发了两次事件

这是在剑道UI网格的上下文中

---

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

主要区别在于每次单击时都会检查第一段代码中的条件。因此，如果动态添加id为

areaA

或

tr

或

td

的元素，则只有第一个元素可以工作

这两段代码之间真的有区别吗

对。第一段代码是委托事件处理的一种形式，其中处理程序由子元素触发的文档冒泡事件触发。第二个是将事件处理程序绑定到jQuery为指定选择器返回的实际元素（inthiscase

#area tr:has（td）

）

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

第一段代码：

委托事件的优点是，它们可以处理来自后代元素的事件，这些子元素稍后添加到文档中 时间通过选择一个保证在 附加委派事件处理程序时，可以使用委派事件处理程序 事件，以避免频繁附加和删除事件 处理程序

第二段代码：

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

---

您描述的第一个方法之所以有效，是因为您选择的是静态父级，然后是动态子级，它遵循将事件绑定到使用.on方法动态创建的元素的规则

下面是

.on

方法的语法，听起来您已经对它做了一些研究

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

因此，如果我想用

绑定到一个动态元素，我必须首先选择一个静态父元素，然后在
方法中选择动态子元素。在您的情况下，正确的用例如下所示：

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

既然你提到它不起作用，我就假设
#area
不是一个静态元素。您可以将body替换为更相关的静态元素，也可以将其保留为body，这并不重要。
第一种方法使用事件委派，第二种方法直接绑定到元素（很可能还不存在）。差别很大。每个元素都绑定到一个完全不同的元素。是的，它们是动态添加的。这就解释了为什么第二个不起作用。