javascript jQuery：.click() 和 .on("click") 之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8018760/
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: difference between .click() AND .on("click")
提问by Omar
I usually use
我通常使用
$(selector).click(...
But some people recommend me to use this instead:
但是有些人建议我改用它：
$(selector).on("click", function(...
Or $(selector).live("click"...(Deprecated)
或$(selector).live("click"...（已弃用）
I read the manual, but my begginer's mind couldn't understand it. I got confused with all the terminology they used. I still do not know the difference nor why to use .on()
http://api.jquery.com/on/
我读了手册，但我的初学者的头脑无法理解。我对他们使用的所有术语感到困惑。我仍然不知道区别，也不知道为什么要使用.on()
http://api.jquery.com/on/
回答by davidchambers
At the end of the day, every event is bound to someelement in the DOM. In the case of .bind, you're binding directly to the element (or elements) in your jQuery object. If, for example, your jQuery object contained 100 elements, you'd be binding 100 event listeners.
归根结底，每个事件都绑定到DOM 中的某个元素。在 的情况下.bind，您直接绑定到 jQuery 对象中的一个（或多个）元素。例如，如果您的 jQuery 对象包含 100 个元素，那么您将绑定 100 个事件侦听器。
In the case of .live, .delegate, and .on, a singleevent listener is bound, generally on one of the topmost nodes in the DOM tree: document, document.documentElement(the <html>element), or document.body. Because DOM events bubble up through the tree, an event handler attached to the bodyelement can actually receive click events originating from any element on the page. So, rather than binding 100 events you could bind just one.
在的情况下.live，.delegate以及.on，一个单个事件侦听器绑定，一般上在DOM树中最上面的节点中的一个：document，document.documentElement（所述<html>元件），或document.body。因为 DOM 事件在树中冒泡，所以附加到body元素的事件处理程序实际上可以接收源自页面上任何元素的点击事件。因此，与其绑定 100 个事件，不如只绑定一个。
For a small number of elements (fewer than five, say), binding the event handlers directly is likely to be faster (although performance is unlikely to be an issue). For a larger number of elements, always use .on.
对于少量元素（比如少于五个），直接绑定事件处理程序可能会更快（尽管性能不太可能成为问题）。对于大量元素，请始终使用.on.
The other advantage of .onis that if you add elements to the DOM you don't need to worry about binding event handlers to these new elements. Take, for example, an HTML list:
另一个优点.on是，如果您向 DOM 添加元素，则无需担心将事件处理程序绑定到这些新元素。以一个 HTML 列表为例：
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
Next, some jQuery:
接下来，一些jQuery：
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
Now, what if we add a todo?
现在，如果我们添加一个 todo 呢？
$('#todo').append('<li>answer all the questions on SO</li>')
Clicking this todo item will not remove it from the list, since it doesn't have any event handlers bound. If instead we'd used .on, the new item would work without any extra effort on our part. Here's how the .onversion would look:
单击此待办事项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果我们改为使用.on，则新项目将无需我们付出任何额外努力即可工作。以下是.on版本的外观：
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
回答by cherouvim
In the plain .click(...if the target of the selector changes on the fly (e.g via some ajax response) then you'd need to assign the behavior again.
在普通情况下，.click(...如果选择器的目标动态更改（例如，通过一些 ajax 响应），那么您需要再次分配行为。
On .live(...the behavior will be automatically be reapplied on the selector.
在.live(...行为便会自动选择重新应用。
The .on(...is very new (jQuery 1.7) and it can cover the livescenario using delegated events which is a faster way to attach behavior anyway.
这.on(...是非常新的（jQuery 1.7），它可以live使用委托事件覆盖场景，无论如何这是一种更快的附加行为的方法。
回答by ismnoiet
The only difference is that .click()will be applied on the elements that exist in the DOM with that particular selector (only the ones that alreadyexist ).
In the other hand .on(selector ,"click",callback);will be applied on all the elements that match that selector
even in the future,
let me give an example :
唯一的区别是，.click()它将应用于具有该特定选择器的 DOM 中存在的元素（仅那些已经存在的元素）。
另一方面.on(selector ,"click",callback);，即使将来也会应用于与该选择器匹配的所有元素，让我举个例子：
$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
If you click on the paragraph that says "this is a copy of the previous paragraph" (the new one ) you don't get the result that you want which is to add a paragraph next to the clicked one because it was not there at the beginning
如果您单击说“这是上一段的副本”（新的）的段落，您将不会得到您想要的结果，即在单击的段落旁边添加一个段落，因为它不在开始
but if you use
但如果你使用
$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
you will get what you want (because .onor .delegatefind the match even with the new ones)
你会得到你想要的（因为.on或.delegate找到匹配甚至新的）
