jquery - What are the significant differences among $(sel).bind("click", $(sel).click(, $(sel).live("click", $(sel).on("click"?

Question

I've been using them for quite some time, but most of the time, I prefer the shorter one, however, I just want to really dig in to the nitty-gritty details. I may have been creating buggy codes and I don't want to contribute and spread lazily-done codes out in the web.

So, tell me:

What are the significant advantages/disadvantages among them, or is it just like ice cream, different flavors but same "feel-good" effect?

Everyone is encouraged to throw their expert opinions regarding this matter.

Many thanks in advance.

Answer 1

bind() was added in 1.0, live() in 1.3, delegate() in 1.4.2 and on() in 1.7.

As of 1.7 on() is the preferred use and live() is deprecated and not recommended at all. If you are using 1.3 use bind() instead of live() and as of 1.4.2 use delegate() instead of live() and as of 1.7 use on() instead of any of the others.

Regarding $("selector").click. Taken from the click() documentation:

In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").

Why use on() instead of the others?
on() is the latest addition, joining the jQuery library in version 1.7. on() has several method signatures enabling it to deliver the same results previous version do but improved and optimised. To quote from the documentation:

As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

There is bascialy no need to use bind() or delegate() anymore. Sure it will work and there should be no harm in using those methods but I would always assume that the latest additions are optimised and improved on any of the drawbacks of previous versions (unless otherwise stated by the documentation as it is in the case of live()).
Based on that I would recommend to use on() instead.

The reason live() is not recommended full-stop is more to do with it's drawbacks. To quote from the live() documentation.

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

• jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
• Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
• Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
• On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:
  1. Use natively clickable elements such as a or button, as both of these do bubble to document.
  2. Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  3. Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copypaste on the element and cause it to be highlighted when touched.
• Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
• The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind("click") removes all click handlers attached by any call to .live()!

There is a lot more goodies in the documentation though.

Additional Resources
click()
bind()
live() (don't use)
delegate()
on()