Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery click(), live() and on() [duplicate]

Tags:

jquery

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.

like image 486
Adam Avatar asked Jun 12 '13 04:06

Adam


People also ask

What is the use of live in jQuery?

jQuery live() Method The live() method attaches one or more event handlers for selected elements, and specifies a function to run when the events occur. Event handlers attached using the live() method will work for both current and FUTURE elements matching the selector (like a new element created by a script).

What is click in jQuery?

jQuery click() MethodThe click event occurs when an element is clicked. The click() method triggers the click event, or attaches a function to run when a click event occurs.

How to use clone in jQuery?

jQuery | clone() with Examples The clone() is an inbuilt method in jQuery which is used to make a copy of selected elements including its child nodes, text and attributes. Parameter: It accepts an optional parameter which could be either true or false specifies that event handler should be copied or not.

How to call a click function in jQuery?

To trigger the onclick function in jQuery, click() method is used. For example, on clicking a paragraph on a document, a click event will be triggered by the $(“p”). click() method. The user can attach a function to a click method whenever an event of a click occurs to run the function.


4 Answers

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()

like image 141
isJustMe Avatar answered Oct 18 '22 08:10

isJustMe


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
    });
    
like image 37
Starx Avatar answered Oct 18 '22 10:10

Starx


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

like image 2
Deepak Saralaya Avatar answered Oct 18 '22 10:10

Deepak Saralaya


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.

like image 2
John Dvorak Avatar answered Oct 18 '22 08:10

John Dvorak