为什么使用jQuery on（）而不是click（）

目前有jQuery，当我需要做点击发生时，我会做这样的事情…

$(".close-box").click( function() { MoneyBox.closeBox(); return false; }); 

我正在看别人有一个项目的代码，他们这样做…

 $(".close-box").live("click", function () { MoneyBox.closeBox(); return false; }); 

注意它似乎做了同样的事情，据我所知，除了他们正在使用live（）函数，这是现在弃用和jQuery文档说，使用on()而不是任何方式为什么使用live / on（），而不是我的第一个例子？

Answer 1

因为你可能有一个dynamic生成的元素（例如来自AJAX调用），你可能想要有相同的点击处理程序，以前绑定到相同的元素select器，然后使用on()与“委派”select器参数

展示：

http://jsfiddle.net/AJRw3/

如果没有指定select器， on()也可以与click()同义：

 $('.elementClass').click(function() { // code }); 

是同义词

 $('.elementClass').on('click', function() { // code }); 

从某种意义上说，它只是将一次处理程序添加到具有class elementClass所有元素。 如果你有一个新的元素$('<div class="elementClass" />') ，比如$('<div class="elementClass" />') ，那么这个处理器就不会被绑定在这个新的元素上，你需要这样做：

 $('#container').on('click', '.elementClass', function() { // code }); 

假设#container是.elementClass的祖先

Answer 2

有很多答案，每个答案都涉及几点 – 希望这可以给你你的答案，以及什么是什么以及如何使用它的一个很好的解释。

使用click()是bind('click' ...)的别名bind('click' ...) 。 使用bind()接收事件侦听器时的DOM，并将该函数绑定到DOM中的每个匹配元素。 也就是说，如果使用$('a').click(...)您将绑定提供给该代码运行时find的DOM中每个定位标记的click事件的函数。

使用live()是jQuery中的老方法; 它被用来像bind()那样绑定事件，但是它不仅在代码运行时将它们绑定到DOM中的元素 – 它还监听DOM中的更改，并将事件绑定到任何未来匹配的元素，如好。 如果您正在执行DOM操作，并且您需要事件存在于某些可能会在稍后被删除/更新/添加到DOM但DOM第一次加载时不存在的元素，这是非常有用的。

live()现在被折旧的原因是因为它实施得不好。 为了使用live() ，你必须能够在DOM中至lessselect一个元素（我相信）。 它也导致函数的副本运行，以绑定到每个元素 – 如果你有1000个元素，这是很多复制的function。

on()函数的创build是为了克服这些问题。 它允许你将一个事件监听器绑定到一个不会在DOM中改变的对象（所以你不能在一个将被移除/添加到DOM的元素上使用on() – 将它绑定到一个父对象）并简单地应用一个元素“filter”，以便该函数只有在冒泡到匹配select器的元素时才运行。 这意味着你只有一个存在的函数（不是一堆拷贝）绑定到一个单一的元素 – 一个更好的方法来在DOM中添加“实时”事件。

…这就是差异所在，为什么每个function都存在，为什么live()被折旧。

Answer 3

• $("a").live() – >它将应用于所有的<a> ，即使它被创build后被调用。
• $("a").click() – >它只适用于所有<a>之前调用。 （这是bind()和1.7 on()中的一个快捷方式）
• $("a").on() – >提供附加事件处理程序所需的全部function。 （最新的jQuery 1.7）

行情 ：

从jQuery 1.7开始，.live（）方法已被弃用。 使用.on（）附加事件处理程序。 老版本的jQuery用户应该优先使用.delegate（）.live（）。
此方法提供了一种方法将委派的事件处理程序附加到页面的文档元素，从而简化了内容dynamic添加到页面时使用事件处理程序。 有关更多信息，请参阅.on（）方法中直接与委派事件的讨论。

.on（）方法将事件处理程序附加到jQuery对象中当前选定的一组元素。 从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的全部function。

对于较早的版本，.bind（）方法用于将事件处理程序直接附加到元素。

Answer 4

click()是on()的非委托方法的快捷方式。 所以：

 $(".close-box").click() === $(".close-box").on('click') 

使用on()委托事件，即。 在dynamic创build的对象，你可以做：

 $(document).on('click', '.close-box') // Same as $('.close-box').live() 

但是， on()在任何静态元素中引入了委托，而不仅仅是live()这样的document ，所以：

 $("#closestStaticElement").on('click', '.close-box') 

Answer 5

你应该阅读live和bind之间的区别 。

简而言之， live使用事件委派，让您绑定现在和将来存在的元素。

相比之下，通过bind （和其快捷方式，如click ）附加的处理程序直接将处理程序附加到与select器匹配的DOM元素，因此只绑定到现在存在的元素。

live的灵活性的后果是性能下降，所以只有当你需要它提供的function时才使用它。

Answer 6

$el.click(fn)是$el.on('click', fn)的快捷方式

有关详细信息，请参阅http://api.jquery.com/click/和http://api.jquery.com/on/ 。

Answer 7

当你需要绑定一些事件处理程序dynamically added elements你必须使用live （不赞成使用）或使其工作。 只需$('element').click(...); 将不会在DOM中的任何dynamic添加的元素上工作。

更多关于jQuery的.bind（），.live（）和.delegate（）之间的区别 。

Answer 8

$ .click（）仅仅是一个bind或者on的快捷方式。 从jQuery文档：

在前两个变体中，这个方法是jQuery 1.7的.bind（“click”，handler）以及.on（“click”，handler）的一个快捷方式。 在第三个变体中，当.click（）不带参数被调用时，它是.trigger（“click”）的快捷方式。

Answer 9

.on()方法将事件处理程序附加到jQuery对象中当前选定的一组元素。 click()方法将事件处理程序绑定到“click”JavaScript事件，或者触发元素上的事件。

在普通的.click(...如果select器的目标在dynamic变化（例如，通过一些Ajax响应），那么你需要重新分配行为。

.on(...是非常新的（jQuery 1.7），它可以覆盖使用委托事件的活动场景，这是一种更快的方式来附加行为。

Answer 10

在on方法中，事件处理程序被附加到父元素而不是目标。

例如： $(document).on("click", ".className", function(){});

在上面的例子中，单击事件处理程序附加到文档。 它使用事件冒泡来知道是否有人点击目标元素。