带有双击事件的 Jquery .on
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13633789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .on with doubleclick event
提问by carlg
Why would this work :
为什么会这样：
$(document).on("dblclick", "#areaA tr:has(td)", function(e) {
//code here
});
and this does not
这不
$("#areaA tr:has(td)").on('dblclick', function(e) {
//Code here
});
I'm following the example on the jquery documentation page exactly, but my double click does not fire. When I do it the first way, it works, but seems like it fires the event twice.
我完全按照 jquery 文档页面上的示例进行操作，但是我的双击没有触发。当我以第一种方式执行此操作时，它可以工作，但似乎会触发该事件两次。
This is in the context of a Kendo UI grid.
这是在 Kendo UI 网格的上下文中。
Is there really a difference between these two pieces of code?
这两段代码之间真的有区别吗？
采纳答案by Denys Séguret
The main difference is that the condition in the first one will be checked each time you click. So if the element with id areaAor the tror tdinside is added dynamically, only the first one can work.
主要区别在于每次单击时都会检查第一个中的条件。所以如果动态添加带有 idareaA或 thetr或tdinside的元素，则只有第一个可以工作。
回答by kiko carisse
The first method you describe works because you are selecting a static parent and then a dynamic child, which follows the rules of binding events to dynamically created elements with the .on method.
您描述的第一种方法有效，因为您选择了一个静态父级，然后是一个动态子级，它遵循使用 .on 方法将事件绑定到动态创建的元素的规则。
Here is the syntax for the .onmethod, which it sounds like you have done a bit of studying on already.
这是该.on方法的语法，听起来您已经对它进行了一些研究。
$(selector).on(event,childSelector,data,function,map)
So if I want to bind to a dynamic element with .on, I have to dollar sign select a static parent element first then, inside the .onmethod, select the dynamic child element. In your case the correct use case would work like this:
因此，如果我想使用 绑定到动态元素.on，我必须先用美元符号选择一个静态父元素，然后在.on方法内部选择动态子元素。在您的情况下，正确的用例将如下工作：
$("body").on('dblclick', '#areaA tr:has(td)', function(e) {
//Code here
});
Since you mentioned it wasn't working I'm assuming #areaAisn't a static element. You can replace body for a more relevant static element, or just leave it body, it doesn't really matter.
既然你提到它不起作用，我假设#areaA它不是静态元素。您可以将 body 替换为更相关的静态元素，或者只是将其保留为 body，这并不重要。
回答by Alex W
Is there really a difference between these two pieces of code?
这两段代码之间真的有区别吗？
Yes. The first piece of code is a form of delegated event handling where the handler is fired by events bubbling up the document that were triggered by descendant elements. The second is binding an event handler to the actual element returned by jQuery for the designated selector (in this case #areaA tr:has(td)).
是的。第一段代码是委托事件处理的一种形式，其中处理程序由由后代元素触发的文档冒泡事件触发。第二个是将事件处理程序绑定到 jQuery 为指定选择器返回的实际元素（在本例中 #areaA tr:has(td)）。
Here's the relevant information from the jQuery documentation:
以下是 jQuery 文档中的相关信息：
First piece of code:
第一段代码：
Delegated eventshave the advantage that they can process events from descendant elementsthat are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。
Second piece of code:
第二段代码：
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在
