Метод live()

В предыдущих главах мы использовали методы bind() и unbind(), чтобы привязывать и отвязывать обработчики событий к различным элементам на странице. Это отлично работает для уже существующих элементов, но что если вы хотите обработчик сработал и для тех элементов, которые вы создадите в будущем? Обычно это приходится делать вручную, путем создания новых элементов, и так тоже можно. Однако, используя метод live(), вы сообщаете jQuery, что нужно привязать обработчик и ко всем будущим элементам, которые будут соответствовать исходному селектору, даже не пошевелив для этого пальцем. Позвольте сначала показать пример, в котором мы используем метод bind(), и затем заменить его на live(), чтобы продемонстрировать разницу:

<div id="divTestArea1">
	<a href="javascript:void(0);" onclick="AddBox();">Add box</a>
	<div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
	$(".test").bind("mouseover", function()
	{
		$(this).css("background-color", "blue");
	}).bind("mouseout", function()
	{
		$(this).css("background-color", "white");
	});
});

function AddBox()
{
	var div = $("<div></div>").addClass("test").text("Another box");
	$("#divTestArea1").append(div);
}
</script>

Возможно, этот пример покажется вам немного сложным, но на самом деле это не так. Давайте разберем его по шагам. У нас есть ссылка, которая вызывает JavaScript-метод AddBox(), а затем идет div с классом "test". Метод AddBox() просто добавляет на страницу еще один div с тем же классом, так что, когда вы кликаете по ссылке, вы получаете еще один контейнер на странице. В событии ready мы выбираем все элементы с классом "test", а затем привязываем обработчики к двум событиям: mouseover и mouseout, чтобы изменить цвет элемента при наведении на него мыши. Запустите этот пример в своем браузере. Первый div получил эффект наведения мыши, но если, покликав на ссылку, вы добавите больше div-ов, у них этого эффекта не будет. Причина довольно очевидна: мы выполнили привязку события до того, как эти div-ы были созданы.

Теперь попробуйте запустить следующий пример. Я изменил в нем всего два слова: два вызова bind() на два вызова live():

<div id="divTestArea2">
	<a href="javascript:void(0);" onclick="AddBox();">Add box</a>
	<div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
	$(".test").live("mouseover", function()
	{
		$(this).css("background-color", "blue");
	}).live("mouseout", function()
	{
		$(this).css("background-color", "white");
	});
});

function AddBox()
{
	var div = $("<div></div>").addClass("test").text("Another box");
	$("#divTestArea2").append(div);
}
</script>

Теперь, запустив этот пример, вы увидите, что хотя мы добавили новые элементы после загрузки страницы, jQuery автоматически добавил к ним обработчики событий. Метод live() работает аналогично bind() во всех остольных отношениях, так что вы можете вернуться к предыдущим главам за более подробной информацией. То же самое справедливо и для метода die(), который работает точно как unbind(), но для случаев, когда вы используете live().