Brandon Aaron

New Plugin: Live Query

Sunday, August 19, 2007

Live Query, previously called Behavior, 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.

For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX or a script.

$('a') 
    .livequery('click', function(event) { 
        alert('clicked'); 
        return false; 
    });

Once you add new A tags to the document, Live Query will bind the click event and there is nothing else that needs to be called or done.

When an element no longer matches a selector the events Live Query bound to it are unbound. Also, the Live Query can be expired by calling expire which will no longer bind anymore events and unbind all the events it previously bound.

Live Query can even be used with the more powerful jQuery selectors. The following Live Query will match and bind a click event to all A tags that have a rel attribute with the word “friend” in it. If one of the A tags is modified by removing the word “friend” from the rel attribute, the click event will be unbound since it is no longer matched by the Live Query.

$('a[@rel*=friend]') 
    .livequery('click', function(event) { 
        doSomething(); 
    });

Live Query also has the ability to fire a callback function when it matches a new element and another callback function for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.

$('li') 
    .livequery(function(){ 
        $(this) 
            .hover(function() { 
                $(this).addClass('hover'); 
            }, function() { 
                $(this).removeClass('hover'); 
            }); 
    }, function() { 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    });

See It In Action

I’ve put together two simple demos that utilize both an event based and function based Live Query on unordered lists.

Get Live Query

Live Query can be downloaded from the Live Query project page. The Live Query documentation is a work in progress but the API is fully documented.

Posted in jQuery with 4 comments