JQueryLiveQuery

Homepage: https://github.com/hazzik/livequery
Author(s): Brandon Aaron, Alexander Zaytsev
Version: 1.3.1

How to use it

Live Query utilizes the power of jQuery selectors by firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

Live Query fires a function (callback) when it matches a new element and another function (callback) 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(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this) 
            .hover(function() { 
                $(this).addClass('hover'); 
            }, function() { 
                $(this).removeClass('hover'); 
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    }); 

API

livequery signatures

The livequery method has 2 different signatures or ways to call it.

Pass one or two functions to livequery. Doing this, livequery will call the first passed function when an element is newly matched and will call the second passed function when an element is removed or no longer matched. The second function is optional. The this or context of the first function will be the newly matched element. For the second function it will be the element that is no longer matched.

// matchedFn: the function to execute when a new element is matched
$(selector).livequery( matchedFn );

// matchedFn: the function to execute when a new element is matched
// unmatchedFn: the function to execute when an element is no longer matched
$(selector).livequery( matchedFn, unmatchFn );

expire signatures

The expire method has 3 different signatures or ways to call it.

The first way will stop/expire all live queries associated with the selector.

$(selector).expire();

The second way will stop/expire all live queries associated with the selector and matchedFn.

// matchedFn: the function to execute when a new element is matched
$(selector).expire( matchedFn );

The third way will stop/expire all live queries associated with the selector, matchedFn, and unmatchedFn.

// matchedFn: the function to execute when a new element is matched
// unmatchedFn: the function to execute when an element is no longer matched
$(selector).expire( matchedFn, unmatchFn );

For Plugin Developers

If your plugin modifies the DOM without using the built-in DOM Modification methods (append, addClass, etc), you can register your plugin with Live Query like this.

if (jQuery.livequery) 
    jQuery.livequery.registerPlugin("pluginMethodName"); 

You can register several plugin methods at once by just passing them as additional arguments to the registerPlugin method.

if (jQuery.livequery) 
    jQuery.livequery.registerPlugin("method1", "method2", "method3"); 

Example

This is the livequery code to prepare the page to process any dom element of class trigger when no matter when it appears.

%STARTSECTION{"javascript"}% <litreral>
<script>

jQuery(function($) {
  $(".trigger").livequery(
    function() {
      var $this = $(this);

      $this.css({
        color:'#fff',
        background:'#b20000',
        display:'inline-block',
        padding:'0.5em'
      });

      //alert("there's a new trigger");
    },
    function() {
      //alert("there's a trigger going offline");
    }
  );

  // adds the refresh behavior
  $(".refresh").click(function() {
    $("#loader").trigger("refresh");
    return false;
  });
});


</script>
</literal> %ENDSECTION{"javascript"}%

This is the content to be loaded asynchronously. It contains a div element with a trigger class. This div will be processed by an event handler registered using livequery.

%STARTSECTION{"loadme"}% <div class="trigger">hello world</div> %ENDSECTION{"loadme"}%

This is a JQueryLoader that will load the content of the loadme section below one with a delay of two second.

Click refresh to do it again.