What's The Difference Between Jquery.bind() And Jquery.on()?

And why is .on() now preferred in jQuery 1.7?

Solution 1:

.on() now offers a combination of .live(), .delegate() and .bind() all in one unified method. You can get the behavior of any of those three just by how you use the arguments to .on().

These pairs are functionally the same:

// events bound directly to the object they occur on
$('.button').on('click', fn);
$('.button').bind('click', fn);

// events intercepted after bubbling up to a common parent object
$('.container').on("click", '.button', fn);
$('.container').delegate('.button', "click", fn);

More info is described in a jQuery blog entry.

Before unifying these separate functions, jQuery had multiple different implementations. Now, .on() is the superset function and .bind(), .live() and .delegate() all just call .on() in their implementation so there is now only one implementation of the actual event handling. So, from that standpoint, it was also a code cleanup and streamlining issue. Similarly, .die(), .undelegate() and .unbind() just call .off() now rather than have separate implementations.

Note: .live() has been deprecated for all versions of jQuery because it's just a special case of intercepting all the bubbled events on the document object so it can be easily replaced with either .delegate() or .on() and when lots of events were all being handled on the document object, it could become a performance problem checking lots of selectors on every event. It's much more efficient to hook a delegated event like this to a common parent that is much closer to where the event occurs than put them all on the document object (thus why .live() is not good to use).

From the jQuery 1.7 source, you can see how all these functions just now call .on() and .off():

bind: function( types, data, fn ) {
    returnthis.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    returnthis.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    returnthis;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    returnthis;
},

delegate: function( selector, types, data, fn ) {
    returnthis.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
},

Solution 2:

The MAIN difference is that .bind requires the element (selector) exist AT THE TIME it gets attached, whereas .on does not have that requirement, and .on frankly has better/more elegant syntax in my opinion. See the documentation first paragraph http://api.jquery.com/bind/

Solution 3:

The old method was a bit messy - the difference between live(), delegate() and bind() was not clear. By making on() the function that handles attaching any event, regardless of whether it exists or not, it's just easier to work with.

Before now, live() was a lot slower than the new on() function, hence why you had to choose between bind() and live().