Question

目前使用jQuery时，我需要在Click发生时执行某些操作，我会这样做......

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

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

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

请注意，除非他们使用的是live（）函数，现在已经过时，而且jQuery文档说使用on()代替但是使用live / on的方式，它似乎做了同样的事情。（）而不是我的第一个例子？

Answer 1

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

演示：

http://jsfiddle.net/AJRw3/

如果您没有指定选择器，

on()也可以与on()同义：

click()

与

同义

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

从某种意义上说，它只将处理程序一次添加到具有类$('.elementClass').on('click', function() { // code });的所有元素。如果您有一个新的elementClass，例如elementClass，则处理程序不会绑定在该新元素上，您需要这样做：

$('<div class="elementClass" />')

假设$('#container').on('click', '.elementClass', function() { // code });是#container的祖先

Answer 2

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

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

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

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

on()功能的创建是为了克服这些问题。它允许您将单个事件侦听器绑定到不会在DOM中更改的对象（因此您不能在稍后将被删除/添加到DOM的元素上使用on() - 将其绑定到父对象），并简单地应用一个元素“过滤器”，以便该函数仅在冒泡到与选择器匹配的元素时运行。这意味着您只有一个函数存在（不是一堆副本）绑定到单个元素 - 这是在DOM中添加“实时”事件的更好方法。

......这就是差异，以及为什么每个函数都存在以及为什么live()被折旧。

Answer 3

$("a").live() - ＆gt;它将适用于所有<a>，即使它是在调用它之后创建的。
$("a").click() - ＆gt;它只会在调用之前应用于所有<a>。（这是bind()的快捷方式，以及1.7中的on()
$("a").on() - ＆gt;提供附加事件处理程序所需的所有功能。（jQuery 1.7中的最新版本）

Quotes：

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

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

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

Answer 4

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')

Answer 5

您应该阅读the difference between live and bind。

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

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

live灵活性的结果是降低了性能，所以只有在需要它提供的功能时才使用它。

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（已弃用）或on使其正常工作。简单$('element').click(...);不适用于DOM中任何动态添加的元素。

更多关于The Difference Between jQuery’s .bind(), .live(), and .delegate()。

Answer 8

$ .Click（）只是bind或on的快捷方式。来自jQuery docs：

在前两个版本中，此方法是.bind（“click”，handler）的快捷方式，以及jQuery 1.7中的.on（“click”，handler）的快捷方式。在第三个变体中，当没有参数调用.click（）时，它是.trigger（“click”）的快捷方式。

Answer 9

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

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

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

Answer 10

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

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

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

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

10 个答案: