Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
181
rated 0 times [  182] [ 1]  / answers: 1 / hits: 37670  / 11 Years ago, wed, march 27, 2013, 12:00:00

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


More From » jquery

 Answers
24

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 ?


[#79312] Tuesday, March 26, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alorac

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
3 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Wed, Jun 3, 20, 00:00, 4 Years ago
Sun, May 17, 20, 00:00, 4 Years ago
;