Live Query

on Nov 26th 2008 with 24 comments

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.

Tags: jQuery
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://URL(Optional) Shaun

    This will definitely solve some problems of mine.

  • http://www.jhaygamba.com Jhay

    Great!!!!

  • http://webdevvote.com WebDevVote

    Simple but useful!!!

  • http://danielfarrell.com/blog/ Daniel

    You should probably use event delegation instead where you can as it’s lighter and faster as a technique.

  • http://aetus.net/ celebrus

    This is cool. :)

    Will probably help me a lot.

  • http://jewepasch.de Jewe

    What is the difference or the advantage to the bind function?

  • http://www.sachagreif.com Sacha

    This can really slow down your apps ! be careful !

  • http://thoughtboxcreative.com Darren

    Perfect! had that problem many a times!

  • http://james.padolsey.com James

    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.

  • http://www.joeholdcroft.com Joe Holdcroft

    I’m with Daniel, event delegation is the way to go for speed and general best practice.

  • http://www.as7ap4you.com kareem

    this is wonderful tutorial i will put acopy of this lesson on
    my site here
    http://www.as7ap4you.com

  • http://www.cere.be Cerebral

    Event delegation, all the way

  • http://thelucid.com Jamie Hill

    +1 for event delegation. We use it heavily on http://laurelandhardyarchive.com

  • http://corn-man.blogspot.com Sudhir

    hmmmm… wouldn’t it be better to use event delegation on the parent element being updated?

  • http://www.chrisgunther.net Chris Gunther

    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

    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?

  • http://www.conspiratordesign.com Christopher

    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???

  • http://latower.com Gilles Ruppert

    @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

  • http://www.kayoooe.com Jmmm

    Thx a lot ! It was really missing..

  • Nate

    Broken demo link. It is possible to have a report broken links button on this site?

  • http://www.reklame-groningen.nl/ Groningen

    Realy nice script, helps realy if you don’t want to run a dispatcher again

  • http://www.fonroots.com Electric Graffiti

    Awesome… Just what i needed

  • oyanamoy

    why do we have to add the “return false;” statement at the end of the function after using alert() ?

  • http://blueco.ir/ طراحی سایت و سئو

    i cant check demo link! why?