jQuery的：。点击（）和。上的差异（QUOT;按一下[） [英] jQuery: difference between .click() AND .on("click")
问题描述
我通常使用
$(selector).click(...
不过也有人建议我用这个代替：
But some people recommend me to use this instead:
$(selector).on("click", function(...
或 $（选择）.live（点击... （德precated）
Or $(selector).live("click"... (Deprecated)
我阅读手册，但我的初学者的头脑无法理解。我弄糊涂了与他们使用的所有术语。我还是不知道其中的差别也不知道为什么要使用。对（）
http://api.jquery.com/on/
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/
推荐答案
在这一天结束时，每个事件势必会的部分的DOM中的元素。在 .bind 的情况下，你直接绑定到你的jQuery对象的元素（或元素）。如果，例如，您的jQuery对象包含100个元素，你会结合100事件侦听器。
At the end of the day, every event is bound to some element 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.
在 .live ， .delegate 和。对，一个单的事件侦听器的约束，通常在DOM树最顶层的节点之一：文件， document.documentElement中（即＆LT; HTML和GT; 元素），或 document.body的。因为DOM事件冒泡通过树的事件处理程序连接到体元素实际上可以接收来自网页上的任何元素始发click事件。因此，而不是绑定100个事件，你可以绑定一个。
In the case of .live, .delegate, and .on, a single event 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 body element can actually receive click events originating from any element on the page. So, rather than binding 100 events you could bind just one.
有关的小数量的元件（超过五较少，比方说），直接结合事件处理程序可能是快（虽然性能不太可能是一个问题）。对于元素的数量较多，总是用。对。
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.
。对的另一个优点是，如果你添加元素的DOM，你不需要担心事件处理程序绑定到这些新元素。举个例子来说，一个HTML列表：
The other advantage of .on is 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:
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
其次，一些jQuery：
Next, some jQuery:
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
现在，如果我们增加一个待办事项？
Now, what if we add a 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 .on version would look:
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
这篇关于jQuery的：。点击（）和。上的差异（QUOT;按一下[）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
