Question

为什么会这样：

$(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

主要区别在于每次点击时都会检查第一个中的条件。因此，如果动态添加内部为areaA或tr或td的元素，则只能使用第一个元素。

Answer 2

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

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

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

因此，如果我想用.on绑定到动态元素，我必须首先选择一个静态父元素，然后在.on方法中选择动态子元素。在您的情况下，正确的用例将如下工作：

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

既然你提到它不起作用我假设#areaA不是静态元素。你可以替换一个更相关的静态元素的body，或者只是将它保留为body，这并不重要。

Answer 3

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

是。第一段代码是委托事件处理的一种形式，其中处理程序由冒充文档的事件触发，这些事件由后代元素触发。第二个是将事件处理程序绑定到jQuery为指定的选择器返回的实际元素（在本例中为#areaA tr:has(td)）。

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

第一段代码：

委托事件的优势在于，他们可以处理来自后代元素的事件，这些事件稍后会添加到文档中时间。通过挑选一个保证存在的元素附加委托事件处理程序的时间，您可以使用委托事件，以避免频繁附加和删除事件的需要处理程序。

第二段代码：

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