带有双击事件的 Jquery .on答案

【问题标题】：Jquery .on with doubleclick event带有双击事件的 Jquery .on
【发布时间】：2012-11-29 20:04:31
【问题描述】：

为什么会这样：

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

这不是

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

我完全按照 jquery 文档页面上的示例进行操作，但是我的双击没有触发。当我以第一种方式执行此操作时，它可以工作，但似乎会触发两次事件。

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

第一段代码：

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

第二段代码：

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

【讨论】：

【解决方案3】：

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

【讨论】：