jquery - 带有双击事件的 Jquery .on

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 网格的上下文中。

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

score 54 · Accepted Answer

主要区别在于每次单击时都会检查第一个条件。areaA所以如果动态添加 id或者tror里面的元素td，只有第一个可以工作。

score 7 · Accepted Answer

您描述的第一种方法有效，因为您选择的是静态父项，然后是动态子项，它遵循将事件绑定到使用 .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，这并不重要。

score 4 · Accepted Answer

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

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

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

第一段代码：

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

第二段代码：

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

3 回答 3