Best practice using BIND or ON functions in jQuery

Question

Recently the jQuery team start recommending to use on instead of bind for binding events to the DOM.

I would like to know if there is a difference between them, what is the benefit of using the on function and if it would be a good call of changing all my bind's to on's functions in my code?

I'm guessing you meant *"BIND and ON"* in your title and not *"BIND and GO"*, right? the only difference between the two is one will go away eventually. — Kevin B, Apr 18 '13 at 19:59
`.on` is the standard way to attach event listeners since 1.7 which has been released about [an year and half ago](http://blog.jquery.com/2011/11/03/jquery-1-7-released/). I wouldn't call that "recently" for a project that has such a fast release cycle as jQuery. — Fabrício Matté, Apr 18 '13 at 20:04

Guffa · Accepted Answer · 2014-03-21T14:31:38.630

The jQuery project is moving towards putting more and more functionality in fewer methods, instead of having separate methods for every separate thing.

The methods bind, live and delegate have all been replaced by the single method on, where you use parameters of different types to determine what the method does.

Comparison:

$(sel).bind(event, f);            =    $(sel).on(event, f);
$(sel).live(event, f);            =    $(document.body).on(event, sel, f);
$(sel).delegate(sel2, event, f)   =    $(sel).on(event, sel2, f);

If you are using live, you should replace that, as the usage of that method is a bit awkward. Also, the live method creates a delegate on the body element, and you should try to bind the delegate to a closer scope.

If you are using bind and delegate it's no panic to replace them with on right away. You can do that in new code, and in code that you edit anyway, but those methods are not about to go away in the nearest future.

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

basically there is no difference in basic use case

 $( '#elementID' ).bind( 'click', function(){...} );
 $( '#elementID' ).on( 'click', function(){...} );

these two are functionally same..

.on() also does event delegation, and is thus preferred.

The idea for adding .on() was to create a unified event API, rather than having multiple functions for binding event;

.on() replaces .bind(), .live() and .delegate().

and as of jquery 1.7 ...bind is just an alias of .on()

score 2 · Answer 3 · answered Apr 18 '13 at 20:04

2

On attaches an event handler from now and for the future. Bind, however only attaches the event when you set it. If other elements are added dynamically, bind won't fire for those elements.

answered Apr 18 '13 at 20:04

nick

17
2

1

The `on` method only creates a delegate if you specify a selector as one of the parameters, otherwise it does the same as `bind`. – Guffa Apr 18 '13 at 20:10

score 1 · Answer 4 · answered Apr 18 '13 at 20:02

1

bind is just a shorthand that will be probably removed. From jQuery's source code:

...

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

...

You can look intro the source code yourself to find a lot about how jQuery works.

answered Apr 18 '13 at 20:02

Jakub Kotrs

5,823
1
14
30

1

That's wrong. `.on()` manage event delegation, `bind` doesn't – Simon Boudrias Apr 18 '13 at 20:05
K, update it to be more precise – Jakub Kotrs Apr 18 '13 at 20:05

score 1 · Answer 5 · answered Apr 18 '13 at 20:04

The difference is that bind bind an event, on can bind event too, but it can also manage event delegation.

http://api.jquery.com/on/#direct-and-delegated-events

If you want to check this more in detail, checkout this blog post: http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Best practice using BIND or ON functions in jQuery

5 Answers5

Linked