jQuery：.click（）和.on（“click”）之间的区别
我通常使用
$(selector).click(... 但有些人推荐我用这个来代替：
$(selector).on("click", function(...
或者$(selector).live("click"... （已弃用）
我看了这本手册，但我的执行者的头脑无法理解。 我混淆了他们使用的所有术语。 我还是不知道为什么使用.on()
http://api.jquery.com/on/
在一天结束时，每个事件都绑定到DOM中的某个元素。 在.bind的情况下，您直接绑定到jQuery对象中的一个或多个元素。 例如，如果您的jQuery对象包含100个元素，则您将绑定100个事件侦听器。
在.live ， .delegate和.on的情况下，绑定单个事件侦听器，通常位于DOM树的最顶层节点之一： document ， document.documentElement （ <html>元素）或document.body 。 由于DOM事件通过树形成泡泡，附加到body元素的事件处理程序实际上可以接收来自页面上任何元素的单击事件。 所以，而不是绑定100个事件，你可以绑定一个。
对于less数元素（less于5个），直接绑定事件处理程序可能会更快（尽pipe性能不太可能成为问题）。 对于更多的元素，请始终使用.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>')
点击这个todo项目不会将它从列表中删除，因为它没有绑定任何事件处理程序。 相反，如果我们使用了这个新的项目，我们不需要额外的努力。 .on版本的外观如下：
$('#todo').on('click', 'li', function (event) { $(event.target).remove() })
在普通的.click(...如果select器的目标在dynamic变化（例如，通过一些Ajax响应），那么你需要重新分配行为。
在.live(...行为将被自动重新应用在select器上。
.on(...是非常新的（jQuery 1.7），它可以覆盖使用委托事件的live场景，这是一种更快的方式来附加行为。
唯一的区别是.click()将应用于DOM中与那个特定select器（仅存在的那些）存在的元素上。
另一方面.on(selector ,"click",callback); 将会应用于所有与这个select器相匹配的元素，甚至将来也是如此，举个例子：
$('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甚至find新的匹配）
