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/
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()
})
event.target. At the time I wrote this I was not sure of the binding of this within event handlers passed to .on. Having just read the method's documentation I now realize that this and event.type will refer to the same object in this case (but don't in all cases).
Commented
Nov 5, 2011 at 9:39
.on method was added in jQuery 1.7 which has just been released. Your fiddle uses jQuery 1.6.4.
Commented
Nov 5, 2011 at 9:42
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.
.on() can be used to attach multiple events simultaneously using a map.
Commented
Nov 5, 2011 at 7:25
$("#myTable").on("click", "tr", .... Have a look at api.jquery.com/on
Commented
Nov 5, 2011 at 7:27
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)
