I found two great articles talking about the new function .on()
: jquery4u.com, elijahmanor.com.
Is there any way where the .bind()
still is better to use than .on()
?
For example, I have a sample code that look like this:
$("#container").click( function( e ) {} )
You can note that I just have one item retrieved by the selector and in my case, the <div>
named #container
already exists when my page was loaded; not added dynamically. It’s important to mention that I use the latest version of jQuery: 1.7.2.
For that sample, should .on()
be used instead of .bind()
even if I don’t use the other features provided by the .on()
function?
Internally,
.bind
maps directly to.on
in the current version of jQuery. (The same goes for.live
.) So there is a tiny but practically insignificant performance hit if you use.bind
instead.However,
.bind
may be removed from future versions at any time. There is no reason to keep using.bind
and every reason to prefer.on
instead.As of Jquery 3.0 and above .bind has been deprecated and they prefer using .on instead. As @Blazemonger answered earlier that it may be removed and its for sure that it will be removed. For the older versions .bind would also call .on internally and there is no difference between them. Please also see the api for more detail.
jQuery API documentation for .bind()
If you look in the source code for
$.fn.bind
you will find that it's just an rewrite function foron
:http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind
From the jQuery documentation:
http://api.jquery.com/bind/
The direct methods and
.delegate
are superior APIs to.on
and there is no intention of deprecating them.The direct methods are preferable because your code will be less stringly typed. You will get immediate error when you mistype an event name rather than a silent bug. In my opinion, it's also easier to write and read
click
thanon("click"
The
.delegate
is superior to.on
because of the argument's order:You know right away it's delegated because, well, it says delegate. You also instantly see the selector.
With
.on
it's not immediately clear if it's even delegated and you have to look at the end for the selector:Now, the naming of
.bind
is really terrible and is at face value worse than.on
. But.delegate
cannot do non-delegated events and there are events that don't have a direct method, so in a rare case like this it could be used but only because you want to make a clean separation between delegated and non-delegated events.These snippets all perform exactly the same thing:
However, they are very different from these, which all perform the same thing:
The second set of event handlers use event delegation and will work for dynamically added elements. Event handlers that use delegation are also much more performant. The first set will not work for dynamically added elements, and are much worse for performance.
jQuery's
on()
function does not introduce any new functionality that did not already exist, it is just an attempt to standardize event handling in jQuery (you no longer have to decide between live, bind, or delegate).