Динамическое назначение обработчиков событий в jQuery 1.3

В новой версии jQuery – 1.3 появилась новая, полезная функия – live(). Это аналог функции bind(), но с одной интересной особенностью. Функия способна назначать обработчики событий динамически при создании новых элементов DOM. Такая необходимость часто возникает при использовании AJAX. К примеру, выполняем запрос на сервер, а результат, получаемый в HTML добавляем на страницу. Если добавленным элементам нужно назначить обработчик событий, то приходится писать код, который делает это непосредственно после добавления.

Рассмотрим пример. Предположим, у нас имеется ненумерованный список, для каждого из элементов которого должен быть установлен обработчик. Плюс имеется кнопка, которая создает новые элементы списка. Список выглядит следующим образом:

	<ul>
		<li>Один</li>
		<li>Два</li>
	</ul>

	<button id="add">Добавить</div>

Код, который назначает обработчики:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

В итоге, при щелчке на элементах, которые были в списке с самого начала, будет показан alert с текстом элемента списка. Но новые элементы на щелчок реагировать не будут, так как созданы они уже после назначения обработчиков (Смотреть пример).

Исправляем это следующим образом:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');

		$('ul li:last').click(function(){
			alert($(this).html());
		});
	});
})

Теперь каждый раз при создании нового элемента, ему будет назначаться обработчик. Одноко, при использовании новой функции live(), это можно сделать немного проще и компактнее:

$(function(){
	$('li').live('click', function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

Результат работы такого кода точно такой же, как в предыдущем варианте, но код получился гораздо понятнее и короче (Смотреть пример). Применив для назначения обработчика live(), я тем самым указал, что он должен быть назначен всем элементам <li> как статическим, так и созданным динамически.

Однако при использовании этой функции стоит учитывать её ограничения:

• пока ещё не все события поддерживаются
• применяться она может только по отношению к селекторам, её нельзя использовать с элементами

Помимо live(), существует и противоположная по назначению функция – die(). Она предназначена для удаления обработчика, назначенного функцией live().

Более подробную информацию можно найти здесь.