Brandon Aaron

Hosted by Media Temple

jQuery Live Query Plugin Demos

A common use-case is when a new list item is added to an unordered list and an event should be bound to it or a script notified of the change.

Binding an event to each list item

The list below uses a live query to bind a click event to each list item that changes the text to read 'Clicked'. Expiring the Live Query unbinds the events.

Get notified when a list item is added

The list below uses a Live Query to call a function when a new list item is added. This function adds the following text to each list item: '(Updated)' and removes it when the Live Query is expired.

Here is the example code used for this demo.

jQuery(function($) {
    /*** Example 1-1 ***/
    $('input[name=example1-1-add]')
        .bind('click', function() {
            $('ul#example1-1')
                .append('<li><a href="#listitem">List Item</a></li>');
            this.blur();
        });
    $('input[name=example1-1-expire]')
        .bind('click', function() {
            $('body #example1-1 a')
                .expire('click');
            this.blur();
            this.disabled = true;
            $('input[name=example1-1-restart]').attr('disabled', false);
        });
    $('input[name=example1-1-restart]')
        .bind('click', function() {
            $('body #example1-1 a')
                .livequery('click', function() {
                    $(this)
                        .text('Clicked')
                        .blur();
                    return false;
                });
            $('input[name=example1-1-expire]')[0].disabled = false;
            $('input[name=example1-1-restart]').attr('disabled', true).blur();
        });
    $('#example1-1', 'body')
        .find('a')
            .livequery('click', function() {
                $(this)
                    .text('Clicked')
                    .blur();
                return false;
            });

    /*** Example 1-2 ***/
    $('input[name=example1-2-add]')
        .bind('click', function() {
            $('ul#example1-2')
                .append('<li>List Item</li>');
            this.blur();
        });
    $('input[name=example1-2-expire]')
        .bind('click', function() {
            $('body #example1-2 li')
                .expire();
            this.blur();
            this.disabled = true;
            $('input[name=example1-2-restart]').attr('disabled', false);
        });
    $('input[name=example1-2-restart]')
        .bind('click', function() {
            $('body #example1-2 li')
                .livequery(function() {
                    $(this)
                        .append('<small>&nbsp;(Updated)</small>');
                }, function() {
                    $('small', this)
                        .remove();
                });
            $('input[name=example1-2-expire]')[0].disabled = false;
            $('input[name=example1-2-restart]').attr('disabled', true).blur();
        });
    $('body #example1-2')
        .find('li')
            .livequery(function() {
                $(this)
                    .append('<small>&nbsp;(Updated)</small>');
            }, function() {
                $('small', this)
                    .remove();
            });
});