Why use jQuery on () instead of click ()

Question

Currently with jQuery, when I need to do something when I click Click, I will do it like this ...

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

I looked at some code that someone else has in the project, and they do it like this ...

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

Note that this seems to be the same as far as I can tell, except that they use the live () function, which is now deprecated, and jQuery docs say to use on() instead, but anyway, why use live / on () instead of my first example?

Answer 1

Since you may have dynamically generated elements (e.g., coming from an AJAX call), you might want to have the same click handler that was previously bound to the same element selector, then you delegate the click event with on() with the selector argument

To demonstrate:

http://jsfiddle.net/AJRw3/

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

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

is synonymous

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

In the sense that it only adds a handler once to all elements with the elementClass class. If you have a new elementClass , for example $('<div class="elementClass" />') , the handler will not be bound to this new element, you need to do:

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

Assuming #container is an .elementClass ancestor

Answer 2

There are many answers, each of which concerns several points - I hope this can give you an answer, with a good explanation of what and how to use it.

Using click() is an alias of bind('click' ...) . Using bind() accepts the DOM in the same way as when the event listener is configured and binds the function to each of the corresponding elements in the DOM. That is, if you use $('a').click(...) , you will bind the function provided to the click event of each anchor tag in the DOM found when this code was run.

Using live() was an old way in jQuery; it was used to bind events, as bind() does, but it doesn’t just bind them to elements in the DOM when the code runs — it also listens for changes in the DOM and binds events to any future-matched elements like Well. This is useful if you are manipulating the DOM, and you want some event to exist on some elements that can be deleted / updated / added to the DOM later, but do not exist when the DOM is first loaded.

The reason live() now depreciating is because it is poorly implemented. To use live() , you must first select at least one element in the DOM (I suppose). It also led to the fact that a copy of the function is launched to bind to each element - and if you have 1000 elements, then many copied functions.

The creation of the on() function was to overcome these problems. It allows you to bind one event listener to an object that will not be changed in the DOM (therefore, you cannot use on() for an element that will be deleted / added to the DOM later - bind it to the parent object), and simply apply the "filter" element so that the function runs only when it is bubbled up to the element corresponding to the selector. This means that you only have one function that exists (and not a bunch of copies) tied to a single element - a much better approach to adding live events to the DOM.

... and here's what the differences are and why every function exists and why live() depreciating.

Answer 3

• $("a").live() → It will apply to all <a> , even if it is created after the call.
• $("a").click() → It will apply to all <a> before it is called. (This is short for bind() and on() in 1.7)
• $("a").on() → Provides all the functions needed to attach event handlers. (New in jQuery 1.7)

Quotes :

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

The .on () method binds event handlers to the currently selected set of elements in the jQuery object. Starting with jQuery 1.7, the .on () method provides all the functions needed to attach event handlers.

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

Answer 4

click() is a shortcut for the non-delegation method on() . So:

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

Delegate events using on() , i.e. in dynamically created objects you can do:

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

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

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

Answer 5

You should read the difference between live and bind .

In a nutshell, live uses event delegation, which allows you to snap to elements that exist now and in the future.

In contrast, handlers attached via bind (and its shortcuts, such as click ) attach handlers directly to the DOM elements corresponding to the selector, and therefore are associated only with existing elements.

The flexibility of live in poor performance, so use it only when you need the features it provides.

Answer 6

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

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

Answer 7

When you need to bind some event handlers to dynamically added elements , you must use live (deprecated) or on to make it work. Just $('element').click(...); will not work with any dynamically added element in the DOM.

Read more about The difference between jQuerys.bind () ,. live () and .delegate () .

Answer 8

$. click () is just a shortcut to bind or enable. From jQuery docs:

In the first two variants, this method is a shortcut for .bind ("click", handler), as well as for .on ("click", handler) according to jQuery 1.7. In the third option, when .click () is called with no arguments, this is a shortcut for .trigger ("click").

Answer 9

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. The click() method associates an event handler with a JavaScript click event or fires this event for an element.

In a regular .click(... , if the selector’s target changes on the fly (for example, via some ajax answer), you will need to assign the behavior again.

.on(... is very new (jQuery 1.7), and it can span a live script using delegated events, which is a faster way to attach behavior anyway.

Answer 10

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

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

In the above example, a binding event handler is attached to the document. And he uses the bubbling event to find out if someone clicked on the target element.