jQuery: difference between .click() AND .on(“click”)

I usually use

$(selector).click(...

But some people recommend me to use this instead:

$(selector).on("click", function(...

Or $(selector).live("click"... (Deprecated)

I read the manual, but my begginer's mind couldn't understand it. I got confused with all the terminology they used. I still do not know the difference nor why to use .on()
http://api.jquery.com/on/

Answers:

Answer

At the end of the day, every event is bound to some element in the DOM. In the case of .bind, you're binding directly to the element (or elements) in your jQuery object. If, for example, your jQuery object contained 100 elements, you'd be binding 100 event listeners.

In the case of .live, .delegate, and .on, a single event listener is bound, generally on one of the topmost nodes in the DOM tree: document, document.documentElement (the <html> element), or document.body. Because DOM events bubble up through the tree, an event handler attached to the body element can actually receive click events originating from any element on the page. So, rather than binding 100 events you could bind just one.

For a small number of elements (fewer than five, say), binding the event handlers directly is likely to be faster (although performance is unlikely to be an issue). For a larger number of elements, always use .on.

The other advantage of .on is that if you add elements to the DOM you don't need to worry about binding event handlers to these new elements. Take, for example, an HTML list:

<ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

Next, some jQuery:

// Remove the todo item when clicked.
$('#todo').children().click(function () {
  $(this).remove()
})

Now, what if we add a todo?

$('#todo').append('<li>answer all the questions on SO</li>')

Clicking this todo item will not remove it from the list, since it doesn't have any event handlers bound. If instead we'd used .on, the new item would work without any extra effort on our part. Here's how the .on version would look:

$('#todo').on('click', 'li', function (event) {
  $(event.target).remove()
})
Answer

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.

On .live(... the behavior will be automatically be reapplied on the selector.

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.

Answer

The only difference is that .click() will be applied on the elements that exist in the DOM with that particular selector (only the ones that already exist ).
In the other hand .on(selector ,"click",callback); will be applied on all the elements that match that selector even in the future, let me give an example :

$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

If you click on the paragraph that says "this is a copy of the previous paragraph" (the new one ) you don't get the result that you want which is to add a paragraph next to the clicked one because it was not there at the beginning

but if you use

$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

you will get what you want (because .on or .delegate find the match even with the new ones)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.