我认为，区别在于使用模式。
我更喜欢 .on 而不是 .click，因为前者 可以 使用更少的内存并适用于动态添加的元素。
考虑以下 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);
});
并想要“警报！”显示警报。我们可以使用“点击”或“打开”。
当我们使用点击
$("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");
下面的代码有什么区别吗？
不，您问题中的两个代码示例之间没有功能差异。 .click(fn) 是 .on("click", fn) 的“快捷方式”。从 the documentation for .on()：
有一些事件的速记方法，例如 .click() 可用于附加或触发事件处理程序。有关速记方法的完整列表，请参阅事件类别。
请注意，.on() 与 .click() 的不同之处在于它能够通过传递 selector 参数来创建 delegated event handlers，而 .click() 则没有。调用 .on() 时不带 selector 参数，它的行为与 .click() 完全相同。如果您想要事件委托，请使用 .on()。
selector 参数使用 event delegation 时才能看到性能提升。如果您在没有 selector 参数的情况下调用 .on()，则与使用 .click() 相比没有性能改进。
从 jQuery 1.7 开始，.on() 是进行所有事件绑定的推荐方法。它将 .bind() 和 .live() 的所有功能整合到一个函数中，当您向其传递不同的参数时，该函数会改变行为。
正如您编写的示例一样，两者之间没有区别。两者都将处理程序绑定到 #whatever 的 click 事件。 on() 提供了额外的灵活性，允许您将 #whatever 的子级触发的事件委托给单个处理程序函数（如果您选择）。
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
.live() 所做的吗？此外，这似乎与其他答案相矛盾，即它仅具有 .click() 的功能，因此不适用于未来的事件。
.on() 可以做 .click() 所做的 并且 做 .bind() 和 .live() 所做的事情 - 它取决于你用什么参数调用它。 （其他一些答案也提到了这一点。）请注意，尽管“绑定到 #whatever 内的所有链接”不是 .live() 所做的，而是 .delegate() 所做的。 .live() 绑定到 document 内的所有内容，而不是让您指定容器。另请注意 .live() 从 jQuery 1.7 开始已弃用。
正如其他答案所述：
$("#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(){});
.click 事件仅在元素被渲染时起作用，并且仅在 DOM 准备好时附加到加载的元素。
.on 事件动态附加到 DOM 元素，当您想将事件附加到 ajax 请求或其他东西（在 DOM 准备好之后）呈现的 DOM 元素时，这很有帮助。
在这里，您将获得应用点击事件的不同方式的列表。您可以相应地选择合适的，或者如果您的点击不起作用，请尝试其中的替代方法。
$('.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
})
不，没有。
on() 的重点是它的其他重载，以及处理没有快捷方法的事件的能力。
他们现在已经弃用了 click()，所以最好使用 on('click')
据我从互联网和一些朋友那里了解到，动态添加元素时会使用 .on() 。但是当我在一个简单的登录页面中使用它时，点击事件应该将 AJAX 发送到 node.js 并在返回时追加新元素，它开始调用多 AJAX 调用。当我将其更改为 click() 时，一切正常。其实我以前没有遇到过这个问题。
新元素
如果您希望单击附加到新元素，请作为上述综合答案的附录，以突出关键点：
由第一个选择器选择的元素，例如 $("body") 必须在声明时存在，否则没有可附加的内容。您必须在 .on() 函数中使用三个参数，包括目标元素的有效选择器作为第二个参数。
$('.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 可以像获取相同的数据一样有效地工作。按钮在更新或删除时不起作用：
https://i.stack.imgur.com/IgTcH.png
on('click' ...)时使用命名空间，请参阅 stackoverflow.com/a/3973060/759452 即。on('click.darkenallothersections' ...)并且同时有on('click.displaynextstep' ...)，那么我只能解绑我使用.unbind('click.displaynextstep')选择的那个