If 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This will definitely solve some problems of mine.
Great!!!!
Simple but useful!!!
You should probably use event delegation instead where you can as it’s lighter and faster as a technique.
This is cool. :)
Will probably help me a lot.
What is the difference or the advantage to the bind function?
This can really slow down your apps ! be careful !
Perfect! had that problem many a times!
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.
I’m with Daniel, event delegation is the way to go for speed and general best practice.
this is wonderful tutorial i will put acopy of this lesson on
my site here
http://www.as7ap4you.com
Event delegation, all the way
+1 for event delegation. We use it heavily on http://laurelandhardyarchive.com
hmmmm… wouldn’t it be better to use event delegation on the parent element being updated?
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.
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?
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???
@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
Thx a lot ! It was really missing..
Broken demo link. It is possible to have a report broken links button on this site?
Realy nice script, helps realy if you don’t want to run a dispatcher again
Awesome… Just what i needed
why do we have to add the “return false;” statement at the end of the function after using alert() ?
i cant check demo link! why?