我通常使用
$(selector).click(...
但是有些人建议我改用它：
$(selector).on("click", function(...
或$(selector).live("click"... （已弃用）
我读了手册，但我的初学者的头脑无法理解。我对他们使用的所有术语感到困惑。我仍然不知道区别，也不知道为什么要使用.on()
http://api.jquery.com/on/
jQuery：.click() 和 .on("click") 之间的区别
IT技术
javascript
binding
methods
jquery
2021-03-14 01:29:50
3个回答
归根结底，每个事件都绑定到DOM 中的某个元素。在 的情况下.bind，您直接绑定到 jQuery 对象中的一个（或多个）元素。例如，如果您的 jQuery 对象包含 100 个元素，那么您将绑定 100 个事件侦听器。
在的情况下.live，.delegate以及.on，一个单个事件侦听器绑定，一般上在DOM树中最上面的节点中的一个：document，document.documentElement（所述<html>元件），或document.body。因为 DOM 事件在树中冒泡，所以附加到body元素的事件处理程序实际上可以接收源自页面上任何元素的点击事件。因此，与其绑定 100 个事件，不如只绑定一个。
对于少量元素（比如少于五个），直接绑定事件处理程序可能会更快（尽管性能不太可能成为问题）。对于大量元素，请始终使用.on.
另一个优点.on是，如果您向 DOM 添加元素，则无需担心将事件处理程序绑定到这些新元素。以一个 HTML 列表为例：
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
接下来，一些jQuery：
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
现在，如果我们添加一个 todo 呢？
$('#todo').append('<li>answer all the questions on SO</li>')
单击此待办事项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果我们改为使用.on，则新项目将无需我们付出任何额外努力即可工作。以下是.on版本的外观：
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
在普通情况下，.click(...如果选择器的目标动态更改（例如，通过一些 ajax 响应），那么您需要再次分配行为。
在.live(...行为便会自动选择重新应用。
这.on(...是非常新的（jQuery 1.7），它可以live使用委托事件覆盖场景，无论如何这是一种更快的附加行为的方法。
唯一的区别是，.click()它将应用于具有该特定选择器的 DOM 中存在的元素（仅那些已经存在的元素）。
另一方面.on(selector ,"click",callback);，即使将来也会应用于与该选择器匹配的所有元素，让我举个例子：
$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
如果您单击说“这是上一段的副本”（新的）的段落，您将不会得到您想要的结果，即在单击的段落旁边添加一个段落，因为它不在开始
但如果你使用
$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
你会得到你想要的（因为.on或.delegate找到匹配甚至新的）