why to use bind or on instead of direct event triggers in jquery?

Question

I have seen many people use bind or on functions instead of direct event triggers etc

  $(document).bind('click', function(){
        alert('Fired');
    });

instead of

  $(document).click(function(){
alert('Fired');
 });

same thing for on function

$('p').on('click', function()({
alert('fired');
 });

instead of

 $('p').click(function()({
  alert('fired');
 });

can someone explain it?

They are all the exact same thing, however, `.on()` is used in favor of `.live()`, `.bind()`, and `.delegate()` as any nuances and bugs that exists between the aforementioned have been fixed and merged to perform as intended. Also, there is no direct benefit of using `.on()` as opposed to `.click()` if the element exists at page load, and you are delegating the event within the `$(document).ready()` function. — Ohgodwhy, Apr 09 '13 at 22:10
Checkout the docs for http://api.jquery.com/click/ , http://api.jquery.com/bind/ and http://api.jquery.com/on/ , they all mention which method is preferred and which one is a short-cut for another and so on. Basically, use `bind()` if on jquery 1.6-, use `delegate()` if on jquery 1.6- and need binding events to dynamic elements and use `on()` if jquery 1.7+ for static and binding to dynamic elements using delegation. — Nope, Apr 09 '13 at 22:12

score 2 · Answer 1 · answered Apr 09 '13 at 22:32

jQuery documentation for .on()

.click() is a shortcut for .on('click', handler). There is no difference at all. So you might as well stick to .on() and save that extra function call.

jQuery documentation for .bind()

As of jQuery 1.7, the .bind(), .live() and .delegate() methods have been superseded by .on(). These functions are going to be removed in future versions of jQuery. The .on() method is the preferred method for attaching event handlers to a document.

Internally, jQuery maps all these methods and shorthand event handler setters to the .on() method, further indicating that you should ignore these methods from now on and just use .on():

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}

score 0 · Answer 2 · answered Apr 10 '13 at 00:02

I use .bind or .on just about everywhere I can. I almost never use .click. Here's why:

If you want to make your website or web app cross-platform compatible, and you want the user to "click" a button if they are on a computer and to "tap" a button on an iPad or other mobile device, .click may not be good for you.

I use something like this:

$("#myButton").on(inputType(), functionHandler(){console.log("you have clicked or touched myButton!"});

function inputType(){
    if(getUserDevice != "computer"){
        return "touchend";
    }else{
        return "click";
    }
}

function getUserDevice(){
    //code in here determine if it's a computer or a "touch device"
    //return "computer";
}

why to use bind or on instead of direct event triggers in jquery?

2 Answers2