August 22, 2007
5:11 pm

Brandon Aaron has written a new jQuery plugin Live Query. 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;
});

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');
});

It may also be included into the core of jQuery v1.2 with more information found in the jQuery roadmap.

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

Live Query, jQuery, Plugins

Loading

Contextual Related Posts:

1 Response | RSS comments on this post | Leave a comment»

  1. 1
    diyism says#1 | October 10th, 2008 at 9:38 pm

    Why not give a try to "jQuery live bind"?

    You even could use it like this(bind an element before create it):
    $.live_bind(".kkkk .ppp[title='333']:nth-child(3)", 'click', alr1);
    $('.kkkk').append('<div class="ppp" title="333">hello');

    http://plugins.jquery.com/project/live_bind

No Pingback yet

PingBack URI

Leave a Response

Comment Preview
« SVG Video DemoGoogle Sky For Earth Released »
Feed Icon

Subscribe via RSS or email: