以下代码之间有什么区别？
$('#whatever').on('click', function() {
/* your code here */
});
和
$('#whatever').click(function() {
/* your code here */
});
#1楼
我认为，区别在于使用方式。
我宁愿使用.on .click .on ，因为前者可以使用更少的内存并可以为动态添加的元素工作。
考虑以下html：
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
我们通过添加新按钮
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
并想要“警惕！” 显示警报。 为此，我们可以使用“单击”或“启用”。
当我们使用click
$("button.alert").click(function() {
alert(1);
});
通过上述操作，将为每个与选择器匹配的元素创建一个单独的处理程序。 那意味着
- 许多匹配的元素将创建许多相同的处理程序，从而增加内存占用量
- 动态添加的项目将没有处理程序-即，在上面的html中，新添加的“警告！” 除非您重新绑定处理程序，否则按钮将不起作用。
当我们使用.on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});
通过上述操作，可以为与选择器匹配的所有元素 （包括动态创建的元素）提供单个处理程序。
...在.on上使用的另一个原因
正如下面的Adrien所述，使用.on另一个原因是命名空间事件。
如果使用.on("click", handler)添加处理程序，通常可以使用.off("click", handler)删除该处理程序。 显然，只有在引用了该函数的情况下，此方法才有效，否则，该怎么办？ 您使用命名空间：
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
通过解除绑定
$("#element").off("click.someNamespace");
#2楼
.click事件仅在呈现元素时起作用，并且仅在DOM准备就绪时才附加到加载的元素上。
.on事件是动态附加到DOM元素的，当您要将事件附加到在ajax请求或其他内容（在DOM准备就绪后）上呈现的DOM元素上时，这很有用。
#3楼
就从互联网和一些朋友处获得的信息而言，在动态添加元素时使用.on（）。 但是，当我在简单的登录页面中使用它时，单击事件应将AJAX发送到node.js，并在返回时附加新元素，它开始调用多个AJAX调用。 当我将其更改为click（）时，一切正常。 其实我以前没有遇到过这个问题。
#4楼
在这里，您将获得应用click事件的不同方式的列表。 您可以选择适当的选择，或者如果单击不起作用，请尝试使用其他方法。
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})
#5楼
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });
- 比$（'。UPDATE'）。click（function（）{}）更有效；
- 它可以使用更少的内存，并可以动态添加元素。
- 某些时间使用编辑和删除按钮动态获取数据的时间在表单中的行数据的编辑或删除数据时未生成JQuery事件，那时候
$(document).on('click','.UPDATE',function(){ });通过使用jQuery，可以有效地像获取相同的数据一样工作。 按钮在更新或删除时不起作用：
#6楼
现在，他们已弃用click（），因此最好使用on（'click'）
#7楼
不，没有。 on()的要点是它的其他重载，以及处理没有快捷方法的事件的能力。
#8楼
从jQuery 1.7开始， .on()是完成所有事件绑定的推荐方法。 它将.bind()和.live()所有功能.bind()为一个函数，该函数会在您向其传递不同的参数时更改行为。
如您所写的示例，两者之间没有区别。 两者都将处理程序绑定到#whatever的click事件。 on()提供了更大的灵活性，允许您将#whatever激发的事件委托给单个处理程序函数（如果选择）。
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
#9楼
以下代码之间有什么区别？
不，问题中的两个代码示例之间没有功能上的区别。 .click(fn)是.on("click", fn)的“快捷方式”。 从.on()的文档中 ：
对于某些事件，有一些简化方法，例如
.click()，可用于附加或触发事件处理程序。 有关速记方法的完整列表，请参阅事件类别 。
需要注意的是.on()从不同.click()其具有能够创建委托的事件处理程序通过传递selector参数，而.click()没有。 当.on()被调用没有selector参数，它的行为完全一样.click() 如果要事件委托，请使用.on() 。
#10楼
它们似乎是相同的。click（）函数的文档：
此方法是.bind（'click'，handler）的快捷方式
on（）函数的文档：
从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的所有功能。 有关从较旧的jQuery事件方法转换的帮助，请参见.bind（）、. delegate（）和.live（）。 要删除与.on（）绑定的事件，请参见.off（）。
#11楼
如其他答案所述：
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })
注意到尽管这.on()支持其他几个参数的组合.click()不，允许它来处理事件代表团（并取代.delegate()和.live()
（显然，还有其他类似的“ keyup”，“ focus”等快捷方式。）
我发布额外答案的原因是提及如果不带参数调用.click()会发生什么情况：
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");
他指出，如果你使用.trigger()直接也可以将额外的参数或一个jQuery事件对象，你不能这样做.click()
我也想提一提，如果你看一下jQuery的源代码（在jQuery的1.7.1.js），你会看到内部的.click()或.keyup()等）函数将实际调用.on()或.trigger() 。 显然，这意味着您可以放心，他们的确具有相同的结果，但这也意味着使用.click()会增加一点点开销-在大多数情况下无需担心甚至无需考虑，但从理论上讲，这可能很重要在特殊情况下。
编辑：最后，请注意.on()允许您将多个事件绑定到同一行中的同一函数，例如：
$("#whatever").on("click keypress focus", function(){});
