Live Query: Unordered List Examples (Using Function References)

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.

$('#example1-1', 'body')
	.find('a')
		.livequery('click', function() {
			$(this)
				.text('Clicked')
				.blur();
			return false;
		});

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.

var matched = function() {
	$(this)
		.append('<small>&nbsp;(Updated)</small>');
};
var unmatched = function() {
	$('small', this)
		.remove();
};
$('#example1-2', 'body')
	.find('li')
		.livequery(matched, unmatched);