jQuery .on连doubleclick

为什么会这样:

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

而且这不

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

我完全遵循jquery文档页面上的示例,但是双击不触发。 当我以第一种方式进行操作时,它可以工作,但是好像它触发了两次事件。

这是在Kendo UI网格中。

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

carlg asked 2019-11-06T05:15:20Z
3个解决方案
46 votes

主要区别在于,每次单击时都会检查第一个条件。 因此,如果动态添加内部ID为areaAtrtd的元素,则只有第一个可以工作。

Denys Séguret answered 2019-11-06T05:15:37Z
5 votes

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

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

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

因此,如果要绑定到带有#areaA的动态元素,则必须先用美元符号选择一个静态父元素,然后在.on方法中选择动态子元素。 在您的情况下,正确的用例将像这样工作:

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

既然您提到它没有用,我假设#areaA不是静态元素。 您可以将body替换为更相关的静态元素,或者只保留它body,这并不重要。

kiko carisse answered 2019-11-06T05:16:23Z
3 votes

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

是。 第一部分代码是委托事件处理的一种形式,其中处理程序由使子元素触发的使文档冒泡的事件触发。 第二种是将事件处理程序绑定到jQuery为指定选择器返回的实际元素上(在这种情况下为#areaA tr:has(td))。

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

第一段代码:

委派事件的优势在于,它们可以处理以后在文档中添加的后代元素中的事件   时间。 通过选择保证存在于元素上的元素   附加委托事件处理程序时,可以使用委托   事件,以避免需要频繁附加和删除事件   处理程序。

第二段代码:

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

Alex W answered 2019-11-06T05:17:27Z
translate from https://stackoverflow.com:/questions/13633789/jquery-on-with-doubleclick-event