225

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?

1
  • 5
    that second article is rubbish. It says how .bind() is bad for binding multiple elements, but fails to mention how .on() when used in binding mode does exactly the same thing.
    – Alnitak
    Aug 7, 2012 at 13:54

6 Answers 6

335

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.

7
  • 5
    Probably -- there's little reason to remove them, since they just map to an existing function. On the other hand, upgrading by a major version number means you can do just about anything to the API, since backwards compatibility is not necessarily guaranteed at that point. Just sayin'. Aug 7, 2012 at 13:43
  • 6
    @Esailija those functions all offer useful shortcuts for dealing with specific types of asynchronous requests. .bind and .on are identical for non-delegated events; .bind does not provide any kind of shortcut like $.getJSON does Aug 7, 2012 at 14:06
  • 7
    @jbabey, while technically true that they don't necessarily remove any functions, they still deprecate them and advise you not to use them. In the future they could always decide to remove them entirely (kind of how they removed certain IE support as of versions 2.x). Deprecated functions should not be used.
    – Hanna
    Jan 30, 2014 at 17:25
  • 8
    printing "jQuery.fn.bind.toString()" outputs "function (a,b,c){return this.on(a,null,b,c)}"
    – Jowen
    Jun 30, 2014 at 10:14
  • 5
    bind and unbind are deprecated as of jQuery 3.
    – Joe Mabel
    Apr 12, 2017 at 18:15
59

These snippets all perform exactly the same thing:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

However, they are very different from these, which all perform the same thing:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

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).

1
  • 1
    I think you mean $('selector').live('click', function () { ... }); so you keep the result as nearly as posible identical. Aug 7, 2012 at 13:32
11

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 than on("click"

The .delegate is superior to .on because of the argument's order:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

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:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "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.

2
  • 12
    As of jQuery 3.0, .delegate() has been deprecated.
    – dim
    Apr 27, 2017 at 10:15
  • The direct methods all got deprecated as well. This answer didn't age well...
    – thelr
    Feb 24, 2022 at 21:39
8

If you look in the source code for $.fn.bind you will find that it's just an rewrite function for on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

6

From the jQuery documentation:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

http://api.jquery.com/bind/

1
  • 1
    Keep in mind, the documentation's advice is from the same team that brought you bind, click, live, delegate..., and all of the resulting confusion. After reading multiple sites on this issue, my opinion is that the best and most accurate sites are the ones that describe 'on' as "sugar-coating", sugar attracts bugs, and delegate is the way to go.
    – DaveWalley
    Aug 22, 2014 at 16:30
4

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()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.