我经常用
$(selector).click(...
但有些人建议我改用这个：
$(selector).on("click", function(...
或$(selector).live("click"...（已弃用）
我阅读了手册，但我的初学者的头脑无法理解它。我对他们使用的所有术语感到困惑。我仍然不知道区别也不知道为什么要使用.on()
http://api.jquery.com/on/
【问题讨论】：
标签： javascript binding methods jquery
唯一的区别是 .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 找到匹配的，即使是新的）
【讨论】：
在一天结束时，每个事件都绑定到 DOM 中的 some 元素。对于.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').append('<li>answer all the questions on SO</li>')
单击此待办事项不会将其从列表中删除，因为它没有绑定任何事件处理程序。相反，如果我们使用.on，则新项目将无需我们付出任何额外努力即可工作。以下是.on 版本的外观：
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
【讨论】：
event.target 的好点。在我写这篇文章的时候，我不确定this 在传递给.on 的事件处理程序中的绑定。刚刚阅读了该方法的文档，我现在意识到 this 和 event.type 在这种情况下将引用同一个对象（但并非在所有情况下）。
.on 方法是在刚刚发布的 jQuery 1.7 中添加的。你的小提琴使用 jQuery 1.6.4。
在普通的.click(... 中，如果选择器的目标即时更改（例如通过一些 ajax 响应），那么您需要再次分配行为。
在.live(... 上，该行为将自动重新应用于选择器。
.on(... 是非常新的（jQuery 1.7），它可以使用委托事件覆盖live 场景，这是一种更快的附加行为方式。
【讨论】：
.on() 使用地图同时附加多个事件。
$("#myTable").on("click", "tr", ...。看看api.jquery.com/on