jQuery $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14879168/
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
$(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
提问by Styphon
I was trying to find out what is the difference between
我试图找出两者之间的区别
$(document).on('click', '#id', function(){});
and
和
$('#id').on('click', function(){});
I've not been able to find any information on if there is any difference between the two, and if so what that difference may be.
我无法找到有关两者之间是否有任何区别的任何信息，如果有，可能有什么区别。
Can someone please explain if there is any difference at all?
有人可以解释一下是否有任何区别吗？
采纳答案by James Allardice
The first example demonstrates event delegation. The event handler is bound to an element higher up the DOM tree (in this case, the document) and will be executed when an event reaches that element having originated on an element matching the selector.
第一个示例演示了事件委托。事件处理程序绑定到 DOM 树上的一个元素（在本例中为document），并且将在事件到达源自与选择器匹配的元素的该元素时执行。
This is possible because most DOM events bubbleup the tree from the point of origin. If you click on the #idelement, a click event is generated that will bubble up through all of the ancestor elements (side note: there is actually a phase before this, called the 'capture phase', when the event comes down the tree to the target). You can capture the event on any of those ancestors.
这是可能的，因为大多数 DOM 事件从原点向上冒泡。如果您单击该#id元素，则会生成一个单击事件，该事件将通过所有祖先元素向上冒泡（旁注：在此之前实际上有一个阶段，称为“捕获阶段”，当事件沿着树向下到达目标）。您可以在这些祖先中的任何一个上捕获事件。
The second example binds the event handler directly to the element. The event will still bubble (unless you prevent that in the handler) but since the handler is bound to the target, you won't see the effects of this process.
第二个示例将事件处理程序直接绑定到元素。该事件仍然会冒泡（除非您在处理程序中阻止它），但由于处理程序绑定到目标，您将看不到此过程的效果。
By delegating an event handler, you can ensure it is executed for elements that did not exist in the DOM at the time of binding. If your #idelement was created after your second example, your handler would never execute. By binding to an element that you know is definitely in the DOM at the time of execution, you ensure that your handler will actually be attached to something and can be executed as appropriate later on.
通过委托事件处理程序，您可以确保为绑定时在 DOM 中不存在的元素执行它。如果您的#id元素是在第二个示例之后创建的，则您的处理程序将永远不会执行。通过绑定到您知道在执行时肯定在 DOM 中的元素，您可以确保您的处理程序实际上将附加到某些内容并且可以在以后适当地执行。
回答by Bhushan Firake
Consider following code
考虑以下代码
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
Now, here goes the difference
现在，区别就在这里
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
Now, what if we add a myTask again?
现在，如果我们再次添加一个 myTask 会怎样？
$('#myTask').append('<li>Answer this question on SO</li>');
Clicking this myTask 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 .on version would look:
单击此 myTask 项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果我们改为使用.on，则新项目将无需我们付出任何额外努力即可工作。以下是 .on 版本的外观：
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
Summary:
概括：
The difference between .on()and .click()would be that .click()may not work when the DOM elements associated with the .click()event are added dynamically at a later point while .on()can be used in situations where the DOM elements associated with the .on()call may be generated dynamically at a later point.
之间的差.on()和.click()将是.click()当与相关联的DOM元素可能不起作用.click()事件是在稍后的点动态地加入，同时.on()可以在与相关联的DOM元素的情况下使用.on()呼叫可在稍后的点动态生成的。
