jquery use of bind vs on click

SteveP picture SteveP · Mar 27, 2013 · Viewed 35.6k times · Source

I have come across several methods for handling click events in jquery:

bind:

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

click:

$('#mydiv').click(function() {
   ...
}

on:

$('mydiv').on('click', function() {
   ...
}

Two questions:

  1. Are they any other ways of doing this?
  2. Which one should I use, and why ?

UPDATE:

As eveyone has helpfully suggested, I should have read the docs better, and found out that I should use:

on() or click(),

which are effectively the same thing.

However, nobody has explained why bind is no longer recommended ? I'll probably get more downvotes for missing the obvious somewhere, but I can't find a reason for this in the documents.

UPDATE2:

'on' has the useful effect of being able to add event handlers to dynamically created elements. e.g.

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

This code adds a click handler to elements with a class of 'myClass'. However, if more myClass elements are then dynamically added later, they automatically get the click handler as well, without having to explicitly call 'on'. From what I understand people are saying, this is also more efficient (see Simons answer below).

Answer

Denys Séguret picture Denys Séguret · Mar 27, 2013

From the documentation of bind and click :

bind :

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

The source makes it clear there's no reason to use bind, as this function only calls the more flexible on function without even being shorter :

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

So I'd suggest, just like the jQuery team, to forget the old bind function, which is now useless. It's only for compatibility with older code that it's still here.

click :

This method is a shortcut for .on('click', handler)

This shortcut is of course less powerful and flexible than the on function and doesn't allow delegation but it lets you write a shorter and, arguably, slightly more readable, code when it applies. Opinions diverge on that point : some developers argue that it should be avoided as it is just a shortcut, and there's also the fact that you need to replace it with on as soon as you use delegation, so why not directly use on to be more consistent ?