What is the difference between .bind('click') and .click() in jQuery?

Question

What is different between two below statement in jQuery:

1) with .bind

$("#username").bind('click',function(){
    //@todo
});

2) without .bind()

$("#username").click(function(){
    //@todo
});

So, when I need to use one of them?

Duplicate: [jQuery: $().click(fn) vs. $().bind('click',fn);](http://stackoverflow.com/questions/518762/jquery-clickfn-vs-bindclick-fn) — user113716, Sep 19 '11 at 16:35
@FelixKling That's a top 10 smart-ass comment, sir. Good work! — Yatrix, Jun 25 '13 at 19:58

James Allardice · Accepted Answer · 2011-09-19T16:41:53.607

There is no difference. If you read the docs for .click you will notice the following line:

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

You can confirm this by taking a quick look at the jQuery source:

function (data, fn) {
    if (fn == null) {
        fn = data;
        data = null;
    }
    //Notice the call to bind on the following line...
    return arguments.length > 0 ? this.bind(name, data, fn) : this.trigger(name);
}

I tend to use .click over .bind, simply because it's quicker to write. However, .bind can be used to attach the same listener to multiple events so it's useful in that case:

$("#something").bind("click mouseover", function() {
    //Do stuff
});

To expand upon the comment by @Tomalak, .bind is also useful when working with custom events. For pretty much any other event, there is a shortcut method just like .click. The jQuery source is as follows:

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error").split(" "), function( i, name ) {
    /*Call .bind for the respective event. There is a shortcut method 
    for each of the events listed above*/
});

You can also write code that binds to custom events (or for dynamically selected ones) with `bind()`. — Tomalak, Sep 19 '11 at 16:37
+1 for a nice thorough explanation and good references to both the jQuery documentation and the jQuery source code. — jfriend00, Sep 19 '11 at 16:45

score 3 · Answer 2 · edited Sep 19 '11 at 16:32

3

There is not difference, .click is a shortcut for .bind('click',.

.click() called without argument is a shortcut for .trigger('click'.

edited Sep 19 '11 at 16:32

Lightness Races in Orbit

378,754
76
643
1,055

answered Sep 19 '11 at 16:30

Arnaud Le Blanc

98,321
23
206
194

score 2 · Answer 3 · answered Sep 19 '11 at 16:29

2

In this form there is no difference. The click method is just a shortcut for bind('click', ...). Which to use is purely a matter of preference / style

answered Sep 19 '11 at 16:29

JaredPar

733,204
149
1,241
1,454

score 0 · Answer 4 · answered Jun 25 '13 at 19:55

0

Using .click() the function is not triggered when touching an anchor using Safari browser in an iPhone with IOS 4x. It does with bind('click')

answered Jun 25 '13 at 19:55

Pablo Cavalieri

81
2
7

score 0 · Answer 5 · answered Sep 19 '11 at 16:30

0

It is just a shortcut. There is really NO difference between them

This method is a shortcut for .bind('click', handler) in the first two variations, and .trigger('click') in the third.

http://api.jquery.com/click/

answered Sep 19 '11 at 16:30

genesis

50,477
20
96
125

What is the difference between .bind('click') and .click() in jQuery?

5 Answers5