Question

I’m using jQuery in my web application. I’ve been using .bind() but I see that it is a little slow, so while reading the documentation I read about .on() and .delegate(). I understand how .delegate() works but I’m not clear on what is the difference between it and .on() or which is better in which scenarios.

Also I’m using jQuery 1.6 so I would like to know if it is worth it to prepare my script for jQuery 1.7 by putting in a condition similar to the following:

if(typeof $(selector).on == 'function'){
    /* use .on() */
}else{
    /* use .delegate() */
}

Is this a good idea (to prepare for .on()) or is it just looking for trouble for nothing?

Please help me to get clear understanding of these methods.

Answer 1

The .on() syntax is the new syntax that version 1.7 uses and it is meant to substitute .bind(), .delegate() and .live().

More here -> http://blog.jquery.com/2011/11/03/jquery-1-7-released/

New Event APIs: .on() and .off()

The new .on() and .off() APIs unify all the ways of attaching events
to a document in jQuery — and they’re shorter to type!

  $(elements).on( events [, selector] [, data] , handler );
  $(elements).off( [ events ] [, selector] [, handler] );

When a selector is provided, .on() is similar to .delegate() in that
it attaches a delegated event handler, filtered by the selector. When
the selector is omitted or null the call is like .bind(). There is one
ambiguous case: If the data argument is a string, you must provide
either a selector string or null so that the data isn’t mistaken as a
selector. Pass an object for data and you’ll never have to worry about
special cases.

All the existing event binding methods (and their corresponding
unbinding methods) are still there in 1.7, but we recommend that you
use .on() for any new jQuery project where you know version 1.7 or
higher is in use. (emphasis mine)