Javascript 多个选择器上的 jQuery on() 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8462027/
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() method on multiple selectors
提问by Wojciech Bednarski
Since version 1.7 liveis deprecated.
由于版本 1.7live已弃用。
Following example is easy to make compatible with new onmethod:
以下示例很容易与新on方法兼容：
$('nav li, #sb-nav li, #help li').live('click', function () {
// code...
});
Using on:
使用on：
$('nav, #sb-nav, #help').on('click', 'li', function () {
// code...
});
How to rewrite following example using on?
如何使用on?
$('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code...
});
回答by Greg Pettit
$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code...
});
.live()is just binding document as listener.
.live()只是将文档绑定为侦听器。
My two cents are that you can almost always find a better listener than document. At bare minimum, almost all pages use a main content wrapper. This eliminates nodes in the header, footer, and sometimes sidebars as listeners.
我的两分钱是你几乎总能找到比document. 至少，几乎所有页面都使用主要内容包装器。这消除了页眉、页脚和有时作为侦听器的侧边栏中的节点。
The best way to use .onas a delegating function is to identify the nearest common ancestor that is expected to never be destroyed or otherwise have events unbound. For example, if you have a form that gets updated and changed by ajax requests, the listener could be the form node itself (if only the contents of the form are updated) or a container element (generally a div) that surrounds the form. If such a div isn't there, you could always add it in, or you could just go up the tree to the next ancestor.
.on用作委托函数的最佳方法是确定预计永远不会被破坏或以其他方式未绑定事件的最近的共同祖先。例如，如果您有一个由 ajax 请求更新和更改的表单，则侦听器可以是表单节点本身（如果仅更新表单的内容）或围绕该表单的容器元素（通常为 div）。如果这样的 div 不存在，您可以随时添加它，或者您可以直接上树到下一个祖先。
[edited to add:]
[编辑添加：]
In the particular sample code provided, it's hard to say if there's a better listener that would contain both #headerand also #sb-sec. But imagining that these things share an ancestor with the id "mainContainer", your more efficient code simply swaps out the listener:
在提供的特定示例代码中，很难说是否有更好的侦听器同时包含#header和#sb-sec。但是想象一下这些东西与 id “mainContainer”共享一个祖先，你的更高效的代码只是简单地交换了监听器：
$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code...
});
回答by jfriend00
If you're trying to use .on()so that you can listen to events on DOM object that may be created after you make the initial .on()call, then the most efficient way to do so is to find an existing parent object that won't come and go and you can bind event listeners to now.
如果您尝试使用.on()以便您可以侦听可能在您进行初始.on()调用后创建的 DOM 对象上的事件，那么最有效的方法是找到一个不会来来去去的现有父对象您可以将事件侦听器绑定到现在。
.live()put all listeners on the document object (the master parent) and could get pretty inefficient if you had a lot of listeners.
.live()将所有侦听器放在文档对象（主父级）上，如果你有很多侦听器，效率会非常低。
.on()allows you to specify what that parent object will most efficiently be. So, if you want to put all these event handlers in one statement and these '#header .fixed-feedback-bn, #sb-sec .feedback-bn' don't have a common parent, then you'd have to specify document as that parent like Greg has written.
.on()允许您指定最有效的父对象是什么。因此，如果您想将所有这些事件处理程序放在一个语句中并且这些 '#header .fixed-feedback-bn, #sb-sec .feedback-bn' 没有共同的父级，那么您必须指定像格雷格这样的父母写的文档。
But, a more efficient way of doing this would be to break this apart according to need. For the elements that have no dynamic need, just bind directly to that element. For example if #header and #sb-sec doesn't come/go and doesn't need dynamic behavior, you can just find directly to it like this:
但是，一种更有效的方法是根据需要将其分开。对于没有动态需要的元素，直接绑定到该元素即可。例如，如果 #header 和 #sb-sec 不来/不去并且不需要动态行为，你可以像这样直接找到它：
$('#header, #sb-sec').on('click', function() {
// code here
});
And, for elements that you need some dynamic behavior, pick an appropriate common parent and hook onto that like this using the common parent as the catch point for the events and the selector as the filter for which sub-elements you want the event to fire for:
并且，对于需要一些动态行为的元素，选择一个合适的公共父级并像这样使用公共父级作为事件的捕获点和选择器作为过滤器作为您希望事件触发的子元素的过滤器为了：
$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here
});
回答by karellm
You may want to have a look at the documentation of live(), the switch to on() is documented: http://api.jquery.com/live/
您可能想查看 live() 的文档，记录到 on() 的切换：http: //api.jquery.com/live/
