Предупреждение : Этот ответ старый. Все еще очень полезно , но live устарело и удалено в более новых версиях jQuery. Так что прочитайте ответ, потому что варианты использования не изменились, и вы узнаете, почему и когда использовать меньше обработчиков событий. Но если вы до сих пор не используете действительно старую версию jQuery (v1.4.2 или более раннюю), вам следует рассмотреть возможность написания нового эквивалентного кода. Как описано в jQuery API для live и скопировано здесь:
Переписать метод .live() с точки зрения его преемников просто; это шаблоны для эквивалентных вызовов для всех трех методов вложения событий:
$( selector ).live( events, data, handler ); // jQuery 1.3+$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+$( document ).on( events, selector, data, handler ); // jQuery 1.7+
Иногда у вас есть набор элементов при загрузке страницы, например, ссылки для редактирования:
<table>
<tr>
<td>Item 1</td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
</table>
Теперь, может быть, у вас есть что-то подобное с jQuery:
$(document).ready(function() {
$('a.edit').click(function() {
// do something
return false;
});
});
Но что, если вы добавите новый элемент в эту таблицу динамически после первоначальной загрузки страницы?
$('table').append('
<tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr>
');
Когда вы нажмете «Изменить» на этом новом элементе, ничего не произойдет, потому что события были связаны с загрузкой страницы. Введите вживую. С его помощью вы можете связать событие выше, как это:
$(document).ready(function() {
$('a.edit').live('click', function() {
// do something
return false;
});
});
Теперь, если вы добавите новые элементы <a> с классом edit после первоначальной загрузки страницы, он все равно зарегистрирует этот обработчик событий.
Но как это сделать?
jQuery использует так называемое делегирование событий для достижения этой функциональности. Делегирование событий полезно в этой ситуации или когда вы хотите загрузить большое количество обработчиков. Допустим, у вас есть DIV с изображениями:
<div id="container">
<img src="happy.jpg">
<img src="sad.jpg">
<img src="laugh.jpg">
<img src="boring.jpg">
</div>
Но вместо 4 изображений у вас есть 100, или 200, или 1000. Вы хотите связать событие щелчка с изображениями, чтобы действие X выполнялось, когда пользователь нажимает на него. Делать это так, как вы могли бы ожидать ...
$('#container img').click(function() {
// do something
});
... тогда связывал бы сотни обработчиков, которые все делают одно и то же! Это неэффективно и может привести к снижению производительности в тяжелых веб-приложениях. С делегированием событий, даже если вы не планируете добавлять больше изображений позже, использование live может быть намного лучше для такой ситуации, так как вы можете затем связать обработчик one с контейнером и проверить, когда он щелкните, если целью было изображение, а затем выполните действие:
// to achieve the effect without live...
$('#container').click(function(e) {
if($(e.target).is('img')) {
performAction(e.target);
}
});
// or, with live:
$('img', '#container').live('click', function() {
performAction(this);
});
Поскольку jQuery знает, что новые элементы могут быть добавлены позже или что производительность важна, вместо привязки события к фактическим изображениям, он может добавить один элемент в div, как в первом примере (на самом деле, я довольно убедитесь, что он связывает их с телом, но может с контейнером в примере выше), а затем делегирует. Это свойство e.target позволяет ему проверять после того факта, соответствует ли событие, на которое было выполнено нажатие / действие, выбранному вами селектору.
Чтобы было понятно: это полезно не только потому, что нет необходимости перепривязывать события, но и может быть значительно быстрее для большого количества предметов.