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:
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).
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 .
The bind() is an inbuilt method in jQuery which is used to attach one or more event handlers for selected element and this method specifies a function to run when event occurs. event: This is an event type which is passed to the selected elements.
jQuery bind() function is used to attach an event handler to elements, while the unbind() is used to detached an existing event handler from elements.
The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.
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 ?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With