为什么要在()上使用jQuery而不是单击()

Currently with jQuery when I need to do something when a Click occurs I will do it like this...

当前在jQuery中，当我需要做某事时，当点击发生时，我会这样做……

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

I was looking at some code someone else has on a project and they do it like this...

我在看别人在一个项目上的一些代码，他们是这样做的……

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

Notice it seems to do the same thing as far as I can tell except they are using the live() function which is now Deprecated and jQuery docs say to use on() instead but either way why use live/on() instead of my first example?

注意，它似乎做了与我所能看到的相同的事情，只是它们使用的是live()函数，现在已经被弃用了，jQuery文档说要使用on()，但不管怎样，为什么要使用live/on()而不是我的第一个例子呢?

10 个解决方案

#1

134

Because you might have a dynamically generated elements (for example coming from an AJAX call), you might want to have the same click handler that was previously bound to the same element selector, you then "delegate" the click event using on() with selector argument

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

To demonstrate:

为了演示:

http://jsfiddle.net/AJRw3/

on() can also be synonymous with click() if you don't have a selector specified:

如果没有指定选择器，on()也可以与click()同义:

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

is synonymous with

是的代名词

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

In the sense that it only add the handler one time to all elements with class elementClass. If you have a new elementClass coming from, for example $('<div class="elementClass" />'), the handler won't be bound on that new element, you need to do:

在某种意义上，它只向所有元素添加一次处理程序，其中包含类elementClass。如果您有一个新的elementClass，例如$('

'))，那么处理程序将不会绑定到这个新元素上，您需要做的是:

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

Assuming #container is .elementClass's ancestor

假设#container是.elementClass的祖先

#2

There are a lot of answers, each touching on a few points - hopefully this can give you your answer, with a good explanation of what's what and how to use it.

有很多答案，每个都涉及到一些点——希望这能给你答案，并对什么是什么以及如何使用它给出一个很好的解释。

Using click() is an alias to bind('click' ...). Using bind() takes the DOM as it is when the event listener is being set up and binds the function to each of the matching elements in the DOM. That is to say if you use $('a').click(...) you will bind the function supplied to the click event of every anchor tag in the DOM found when that code runs.

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

Using live() was the old way in jQuery; it was used to bind events just like bind() does, but it doesn't just bind them to elements in the DOM when the code runs - it also listens to changes in the DOM and will bind events to any future-matched elements as well. This is useful if you're doing DOM manipulation and you need an event to exist on some elements that may get removed/updated/added to the DOM later but don't exist when the DOM is first loaded.

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

The reason that live() is now depreciated is because it was poorly implemented. In order to use live(), you had to be able to select at least one element in the DOM initially (I believe). It also caused a copy of the function to run to be bound to each element - and if you have 1000 elements, that's a lot of copied functions.

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.

on()函数的创建是为了克服这些问题。它允许您将一个事件监听器绑定到一个对象中不会改变DOM(所以你不能用()一个元素将被删除/添加到DOM之后,将其绑定到一个父对象),并简单地应用于一个元素“过滤器”,这样的函数只是运行时冒出来的选择器匹配的元素。这意味着您只有一个存在的函数(而不是一堆副本)绑定到单个元素——在DOM中添加“活动”事件的更好方法。

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

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

#3

$("a").live() --> It will apply to all <a>, even if it is created after this is called.
$(“a”).live()——>它将应用于所有，即使它是在调用之后创建的。
$("a").click() --> It will only apply to all <a> before this is called. (This is a shortcut of bind(), and on() in 1.7)
$(“a”).click()—>在调用之前，它只应用于所有。(这是bind()的快捷方式，而on()是1.7)
$("a").on() --> Provides all functionality required for attaching event handlers. (Newest in jQuery 1.7)
$(“a”).on()——>提供附加事件处理程序所需的所有功能。在jQuery 1.7(最新)

Quotes:

报价:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

对于jQuery 1.7，不赞成使用.live()方法。使用.on()附加事件处理程序。旧版本jQuery的用户应该使用.delegate()而不是.live()。此方法提供了将委托事件处理程序附加到页面的文档元素的方法，当内容被动态添加到页面时，该方法简化了事件处理程序的使用。有关更多信息，请参见.on()方法中关于直接事件和委托事件的讨论。

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

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

For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

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

#4

click() is a shortcut to the non delegation method of on(). So:

单击()是on()的非委托方法的快捷方式。所以:

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

To delegate events with on(), ie. in dynamic created objects you can do:

将事件委托给on()在动态创建的对象中，您可以:

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

But, on() introduces delegation in any static element, not just document as live() does, so:

但是，on()在任何静态元素中引入了委托，而不仅仅像live()那样引入文档，因此:

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

#5

You should read up on the difference between live and bind.

你应该读一下“活”和“绑定”的区别。

In a nutshell, live uses event delegation, allowing you to bind to elements that exist now and in the future.

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

In contrast, handlers attached via bind (and its shortcuts, like click) attach handlers directly to the DOM elements matching the selector, and therefore are only bound to elements that exist now.

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

A consequence of live's flexibility is decreased performance, so only use it when you need the functionality it provides.

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

#6

$el.click(fn) is a shortcut for $el.on('click', fn)

$el.click(fn)是$el的快捷方式。(“点击”,fn)

See http://api.jquery.com/click/ and http://api.jquery.com/on/ for more info.

更多信息请参见http://api.jquery.com/click/和http://api.jquery.com/on/。

#7

When you need to bind some event handlers to dynamically added elements you have to use live (deprecated) or on make the it working. Simply $('element').click(...); won't work on any dynamically added element in to the DOM.

当您需要将一些事件处理程序绑定到动态添加的元素时，您必须使用live(已弃用)或on使it工作。美元(元素).click(…);不会对DOM中任何动态添加的元素起作用。

More on The Difference Between jQuery’s .bind(), .live(), and .delegate().

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

#8

$.click() is merely a shortcut for either bind or on. From jQuery docs:

$.click()只是bind或on的快捷方式。从jQuery文档:

In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").

在前两个变体中，该方法是jQuery 1.7. bind(“单击”、handler)以及.on(“单击”、handler)的快捷方式。在第三种变体中，当.click()被调用而没有参数时，它是.trigger(“click”)的快捷方式。

#9

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. The click() method binds an event handler to the "click" JavaScript event, or triggers that event on an element.

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

In the plain .click(... if the target of the selector changes on the fly (e.g via some ajax response) then you'd need to assign the behavior again.

在平原.click(…如果选择器的目标发生变化(e)。通过ajax响应g)然后您需要再次分配行为。

The .on(... is very new (jQuery 1.7) and it can cover the live scenario using delegated events which is a faster way to attach behavior anyway.

内用(…是非常新的(jQuery 1.7)，它可以使用委托事件来覆盖现场场景，这是一种更快的附加行为方式。

#10

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

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

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.

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

#1

134