87

目前使用jQuery，当我需要在点击发生时做某事时，我会这样做......

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

我正在查看其他人在项目中的一些代码，他们这样做......

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

请注意，据我所知，它似乎在做同样的事情，除了他们正在使用现在已弃用的 live() 函数，jQuery 文档说要使用on()它，但无论哪种方式，为什么要使用 live/on() 而不是我的第一个示例？

4

10 回答 10

153

因为您可能有一个动态生成的元素（例如来自 AJAX 调用），您可能希望拥有之前绑定到同一个元素选择器的相同单击处理程序，然后使用on()选择器参数“委托”单击事件

展示：

http://jsfiddle.net/AJRw3/

on()click()如果您没有指定选择器，也可以是同义词：

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

是同义词

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

从某种意义上说，它只将处理程序一次添加到所有具有 class 的元素elementClass。elementClass例如，如果您有一个$('<div class="elementClass" />')新元素，则处理程序不会绑定在该新元素上，您需要执行以下操作：

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

假设#container是.elementClass的祖先

于 2012-04-10T01:43:05.980 回答
40

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

Usingclick()是bind('click' ...). Usingbind()在设置事件侦听器时使用 DOM，并将函数绑定到 DOM 中的每个匹配元素。也就是说，如果您使用$('a').click(...)，您会将提供的函数绑定到该代码运行时找到的 DOM 中每个锚标记的 click 事件。

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

现在贬值的原因live()是因为执行不力。为了使用live()，您最初必须能够在 DOM 中选择至少一个元素（我相信）。它还导致运行的函数副本绑定到每个元素 - 如果您有 1000 个元素，那就是很多复制的函数。

The creation of the on() function was to overcome those problems. It lets you bind a single event listener to an object that will not change in the DOM (so you can't use on() on an element that will be removed/added to the DOM later - bind it to a parent object), and simply apply an element "filter" so that the function is only run when it is bubbled up to an element that matches the selector. This means you have just one function that exists (not a bunch of copies) bound to a single element - a much better approach to adding "live" events in the DOM.

... and that is what the differences are, and why each function exists and why live() is depreciated.

于 2012-04-10T02:08:27.453 回答
19
  • $("a").live()--> 它将适用于 all <a>，即使它是在调用 this 之后创建的。
  • $("a").click()--> 它只适用于<a>调用 this 之前的所有内容。（这是bind(), 和on()1.7 中的快捷方式）
  • $("a").on()--> 提供附加事件处理程序所需的所有功能。（jQuery 1.7 中的最新版本）

行情：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。
此方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这在将内容动态添加到页面时简化了事件处理程序的使用。有关更多信息，请参阅 .on() 方法中对直接事件与委托事件的讨论。

.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。

对于早期版本， .bind() 方法用于将事件处理程序直接附加到元素。

于 2012-04-10T01:39:32.310 回答
7

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

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

委托事件on()，即。在动态创建的对象中，您可以执行以下操作：

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

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

$("#closestStaticElement").on('click', '.close-box')
于 2012-04-10T01:42:57.587 回答
4

您应该阅读和之间的区别livebind。

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

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

的灵活性的结果live是降低了性能，因此仅在需要它提供的功能时才使用它。

于 2012-04-10T01:39:14.977 回答
3

$el.click(fn)是一个捷径$el.on('click', fn)

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

于 2012-04-10T01:42:40.800 回答
2

当您需要绑定一些事件处理程序时，dynamically added elements您必须使用live（已弃用）或on使其工作。根本$('element').click(...);不会处理任何动态添加到 DOM 中的元素。

更多关于jQuery 的 .bind()、.live() 和 .delegate() 之间的区别。

于 2012-04-10T01:41:12.657 回答
1

$.click() 只是绑定或打开的快捷方式。来自 jQuery 文档：

在前两个变体中，此方法是 .bind("click", handler) 的快捷方式，以及 jQuery 1.7 中的 .on("click", handler) 的快捷方式。在第三个变体中，当不带参数调用 .click() 时，它是 .trigger("click") 的快捷方式。

于 2012-04-10T01:39:48.663 回答
1

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

如果.click(...选择器的目标即时更改（例如通过一些 ajax 响应），那么您需要再次分配行为。

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

于 2012-04-10T01:46:05.963 回答
1

In on method, event handler is attached to the parent element instead of target.

example: $(document).on("click", ".className", function(){});

In above example, click event handler is attached to document. And it uses event bubbling to know whether someone clicked on the target element.

于 2014-08-18T11:54:09.703 回答