jQuery click(), live() and on()

Question

Just interested to know which of - click(), live() and on() is currently the preferred method to catch a user mouse click?

I assume live() is out as this I believe scans to much of the DOM.

Thank you.

Answer 1

From jquery docs:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

TLDR: Always use on() , never use live()

Answer 2

live() and .bind() methods are deprecated. live() has also been removed where as other two are two totally two different types of event handlers.

1. .click() is a standard event handler

   .click(function() {
       //Applies to DOM already present
   });
   

2. .on() is used when you require event delegation. This replaced traditional bind() and delegate()

   .on('click', function() {
           //Delegates to each element is DOM as it manipulated or generated
   });
   

Answer 3

but jQuery 1.9 not supporting live function ,instead of you should use "on"

Answer 4

TL;DR: live is deprecated, bind and delegate are superseeded, on is the preferred way to bind arbitrary events and click is just fine, but kinda limited.

$(selector).live("click", ...) is deprecated since 1.7, removed from jQuery since 1.9, inflexible (it always binds to document), extremely inefficient (it first finds the elements, then discards the selection and uses the selector instead), requires the selector to be stored in the jquery object and is generally bad.

$(document).on("click", selector, ...) is the literal replacement for live, but it shares none of its misfeatures. It's the do-everything event binding function of jQuery. It can bind anything anywhere, or delegate to anything: $parent.on(events, [targetSelector,] handler). You can even bind multiple events at once: .on("keypress paste change", ...)

bind and delegate are older cousins of on. The former cannot delegate, the latter has to. They also differ in the argument order - on is here to settle that. They have been superseeded by on, but they have not been deprecated (as of jQuery 1.10). If you have to use an old version of jQuery (pre-1.7), there they are. Otherwise, stick to on. Their current implementation merely redirects to on.

click, mouseOver, change and many other serve as double-duty aliases for on and trigger. Literally - they do nothing else than to branch off to one of those. Most of them exist since the dawn of time and they are conveniently conscise. They can't delegate, however, and there are no corresponding unbinding methods for them. If you use off, it looks better to complement it with on. One nice property is that they bear with them a promise of cross-browser compatibility. Or at least a place where to document any lack of cross-browser support (namely: load for images). My personal preference is to use on even in cases where click would suffice.

Answer 5

"On" is the preferred method, because in future you can easily change it to another like "mouseup", "mousedown".