jQuery .on() 在事件委托中有多个选择器？答案

【问题标题】：jQuery .on() with multiple selectors in event delegation?jQuery .on() 在事件委托中有多个选择器？
【发布时间】：2011-11-14 17:16:37
【问题描述】：

我在 jQuery 1.7 中使用了.on()，想知道是否可以一次为已注入页面的元素附加多个选择器。以前，我使用的是live() - 但鉴于性能改进，我想迁移的原因很明显。

你能不能像这样使用.on()：

$(document).on('click', '#selector1, #selector2, .class1', function () { 
     //stuff
});

附加到文档有什么好处吗？

【问题讨论】：

【解决方案1】：

你能以如下方式使用 .on()：

$(document).on('click', '#selector1, #selector2, .class1', function () { 
    //stuff
});

鉴于性能改进，我想使用它而不是 live()。

使用该代码 sn-p 与使用 live() 相比没有性能优势，因为 live() 本身将事件绑定到文档，并且在 jQuery 1.7 中，实时调用 @987654328 @幕后。
附加到文档有什么好处吗？

绑定到document 的缺点是事件在处理之前必须遍历整个祖先列表； as pointed out in the jQuery documentation，这是可能的最慢路线。通过将处理程序附加到更接近事件源的元素，更快地处理事件会更好。

【讨论】：

非常酷，谢谢。我很怀疑 :) 所以基本上，我只需要在靠近我的 .on( 选择器的位置添加一个选择器吗？即类似$('.closer-parent-container').on('click', '#selector1, #selector2, .class1', ?
@Andy：是的，就是这样。显然，您在上调用 .on() 的元素在您调用 .on() 时必须在 DOM 中。
@Matt - 超级棒！很快就为我解决了这个问题：）当计时器允许时，我会选择你的答案：）谢谢大家！
@Matt - 最后。有什么方法可以轻松处理 $(this) 在我想要定位 #selector1, #selector2, .class1 而不是 .closer-parent-container 的意义上？使用 $(this) 现在选择 .closer-parent-container 而不是我想要的 - #selector1, #selector2, .class1 ?
@Andy，不应该这样；见jsfiddle.net/DDu3z/1。如果您在单击任何元素时检查控制台，您将看到报告的正确输出。您可以发布您正在使用的代码吗？

【解决方案2】：

这是可能的，“this”是点击的选择器，而不是文档。

最好附加到选择器最近的父元素。当您单击“#selector1”时，事件会冒泡到事件处理程序元素，此处为：文档。

层数越多，动作就越多。而且，如果selector1和document之间还有一个click事件处理器，可以用event.stopPropagation();拦截，永远不会到达“document”事件处理器。

你可以查看流氓事件“拦截”in this fiddle。

【讨论】：