Live Query
Nov 26th in PluginsIf you've ever dynamically created an element using Javascript, you'll no doubt have experienced problems with binding events to these elements. Luckily, a small jQuery plugin created by Brandon Aaron (jQuery team member), called Live Query, makes this a cinch.
"Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated."
Implementation
$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
This will fire the click event on all anchor tags - even the ones that have been dynamically generated with AJAX. For more information, refer to the documentation.
Related Freebies
Download some more awesome freebies!
User Comments
( ADD YOURS )Shaun November 26th
This will definitely solve some problems of mine.
( )Jhay November 26th
Great!!!!
( )WebDevVote November 26th
Simple but useful!!!
( )Daniel November 26th
You should probably use event delegation instead where you can as it’s lighter and faster as a technique.
( )celebrus November 26th
This is cool.
Will probably help me a lot.
( )Jewe November 26th
What is the difference or the advantage to the bind function?
( )Sacha November 26th
This can really slow down your apps ! be careful !
( )Darren November 26th
Perfect! had that problem many a times!
( )James November 26th
This is a cool plugin but those using it should be aware that it only works if you add your elements using jQuery, – all the plugin actually does is extend jQuery’s append/html/prepend/insertBefore etc. etc. functions.
So, if you were to add an element using JavaScript’s native “elem.appendChild(document.createElement(’a'))” this plugin would be ineffective.
( )Joe Holdcroft November 27th
I’m with Daniel, event delegation is the way to go for speed and general best practice.
( )kareem November 27th
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
Cerebral November 27th
Event delegation, all the way
( )Jamie Hill November 27th
+1 for event delegation. We use it heavily on http://laurelandhardyarchive.com
( )Sudhir November 27th
hmmmm… wouldn’t it be better to use event delegation on the parent element being updated?
( )Chris Gunther December 1st
I’ve used LiveQuery on my site to handle the issue of dynamically added content but now I’ll have to look into using event delegation instead. Thanks for pointing out that alternative.
( )gogi December 8th
hi, i don’t understand it much. but does this mean i have to install a plugin for firefox/ie before i can use this one?
( )Christopher December 8th
I’ve used LiveQuery on a recent side project and heard about the problems, so I attempted to try out Delegation, but I couldn’t figure out the syntax. Anyone know of a good explanation/tutorial on how to use it? I’m not a total newbie, but I couldn’t figure it out. If it’s the lighter, faster solution, I feel like I should know more. Maybe Net Tuts could look into this???
( )Gilles Ruppert December 10th
@Christopher: there is no specific syntax to event delegation. Christian Heilmann has a good post about here:
http://icant.co.uk/sandbox/eventdelegation/
& Dan Webb wrote a jQuery plugin
http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery
What I tend to do is bind the event on the parent & then check for classes of the target. In jQuery code it looks similar to this:
$('ul').click(function(e){
var $t = $(e.target); // converts the target into a jQuery object
// this kind of code is needed if you want to do something different depending on the item clicked
if ($t.hasClass('.next')) {
getNext($t);
} else if ($t.hasClass('.prev')) {
getPrev($t);
}
// or you can do this if you just want to do the same thing
$t.css('color', 'red'); // makes the clicked element red
return false; // stop the event propagation & default action old school way
});
This is just a quick example & should not be used in production code (it might have some errors in it, I just quickly typed it into the box);
Hope this is helpful
( )Jmmm December 14th
Thx a lot ! It was really missing..
( )Nate January 29th
Broken demo link. It is possible to have a report broken links button on this site?
( )Groningen February 9th
Realy nice script, helps realy if you don’t want to run a dispatcher again
( )Electric Graffiti June 11th
Awesome… Just what i needed
( )oyanamoy September 4th
why do we have to add the “return false;” statement at the end of the function after using alert() ?
( )