Reputation: 86595
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
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
Reputation: 93714
There are numerous drawbacks to .live()
, such that I'd restrict its use to when:
.live()
works by attaching an event handler to document
, and checking if event.target
matches the given selector. This results in:
#some_id
are clicked.stopPropagation()
of the event since it has already reached the root (although you can still preventDefault()
).#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..triggerHandler()
on the element.Upvotes: 8
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
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:
.live()
. Rather, the .live() method should always be called directly after a selector, as in the example above..live()
, the handler must return false. Calling .stopPropagation()
will not accomplish this..live()
: click
, dblclick
, keydown
, keypress
, keyup
, mousedown
, mousemove
, mouseout
, mouseover
, and mouseup
.Upvotes: 1
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
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