CODEWITHSUNDEEP
jqueryeventslive
cHao
cHao

Reputation: 86595

Should I be using .live(...)?

When I use jQuery to attach events to elements, I typically do it like this: 

$(document).ready(function() {
    $('#some_id').click(function() {
        // Do some stuff
    });
});

However, I've seen a number of examples that do it like so: 

$('#some_id').live('click', function() {
    // Do some stuff
});

(Almost always without the ready wrapper.)

Is there a drawback to one way or the other, if the elements are already in the page and aren't going anywhere?

Upvotes: 2

Views: 243

Answers (7)

Vovk Donets
Vovk Donets

Reputation: 46

Reasons for using .live() method can be a dynamically added, created or loaded DOM elements. For example, you dynamically, through AJAX call, loading a form and you want to bind to "submit" event of this form some callback function. You can do this manually when process of loading form is done or you can just use .live() method once and forget about handling this form every time when it loaded.

p.s. there was troubles with .live() and sumbit, but i hope they were fixed.

Upvotes: 0

Alistair Laing
Alistair Laing

Reputation: 973

you could use .delegate http://api.jquery.com/delegate/

Upvotes: -1

David Tang
David Tang

Reputation: 93714

There are numerous drawbacks to .live(), such that I'd restrict its use to when:

  1. a large number of elements need to be bound to the same event handler, or
  2. elements are frequently added or removed.

.live() works by attaching an event handler to document, and checking if event.target matches the given selector. This results in:

  • unnecessary checks against the selector when elements other than #some_id are clicked.
  • no opportunity to stopPropagation() of the event since it has already reached the root (although you can still preventDefault()).
  • similarly, click handlers attached to parents of #some_id (via .click() or .bind()) that return false or stopPropagation() will silence handlers attached via .live(), as the event will no longer reach the root.
  • it can only be used with a selector (string).
  • unexpected event handling order can result since events will be fired in the order they are bound, and not in bubbling order (child to parent).
  • the event is not removed if the element is removed.
  • while rare, you cannot .triggerHandler() on the element.

Upvotes: 8

Felix Kling
Felix Kling

Reputation: 817238

The drawback is that the event handling is "slower". live() attaches a click handler to the document root and makes use of event bubbling to capture the events from the specified elements.

So instead of the event being handled directly by the element it was raised on, it has to bubble up the whole DOM tree.

Upvotes: 2

Agos
Agos

Reputation: 19460

You only need .live() if there will be dinamically added elements. If the DOM is static, you're safe with .click().

Some more caveats on using .live() from the official documentation:

  • DOM traversal methods are not supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector, as in the example above.
  • To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
  • In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

Upvotes: 1

Stephen Chung
Stephen Chung

Reputation: 14605

.live works like a *live* node list, which means that nodes you add after the call (matching the css selector) will also be added the handler.

The first call only adds the handler to the node(s) matching the css selector at the time of the call.

In your example, your css selector is #some_id. If you later on add a few nodes with exactly the same id (i.e. some_id), those nodes will be added the handler with .live() but not with the first call.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039588

You would use .live when the DOM elements to which you are attaching the events could be modified/replaced. It has an additional overhead as it will listen for DOM modifications. So use it only if you know that the DOM elements will be modified in order to avoid the need of reattaching them. For example if you use AJAX to replace portions of your page with some new content and this portions contained DOM elements to which you was attaching events you need to use .live. Otherwise use standard .click.

Upvotes: 1

Related Questions