web-development.ucoz.ru

Описание: Прикрепляет обработчик к событию для всех элементов, которые соответствуют текущему селектору, в настоящее время или в будущем.

Этот метод является вариацией базового метода .bind() для подключения обработчиков событий для элементов. Когда .bind() вызывается, элементы, к которым относится объект jQuery получают прикрепленный обработчик; элементы, которые введены позже не получают его, поэтому они будут нуждаться в другом вызове .bind(). Для наглядности, рассмотрим HTML:

Мы можем связать простой обработчик щелчка мыши на этот элемент:

$('.clickme').bind('click', function() {
 // Bound handler called.
});

Когда элемент нажали, обработчик вызывается. Тем не менее, предположим, что после этого еще один элемент добавляется:

Этот новый элемент также соответствует селектору .clickme, но, поскольку он был добавлен после вызова .bind(), нажатие на него ничего не даст.

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

$('.clickme').live('click', function() {
 // Live handler called.
});

И затем, когда новый элемент добавлен:

Затем нажатие на новый элемент также запустит обработчик.

Делегирование событий

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

1. Событие нажатия генерируется и передается в <div> для обработки.
2. Ни один обработчик напрямую не привязывается к <div>, таким образом событие распространяется вверх по дереву DOM.
3. Событие поднимается вверх пока не достигает корня дерева, к которому .live() прикрепил по умолчанию специального обработчика.
   * Начиная с jQuery 1.4, распространение события можно опционально остановить "контекстно" на элементе DOM.
4. Специальный обработчик нажатия, прикрепленный с помощью .live() выполняется.
5. Обработчик тестирует цель события объекта, чтобы посмотреть должен ли он продолжать. Этот тест проводится путем проверки, если $(event.target).closest('.clickme') может найти соответствующий элемент.
6. Если соответствующий элемент найден, оригинальный обработчик вызывается на него.

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

Смотрите обсуждение по .bind() для более подробной информации о связвании события.

Множественные события

Начиная с jQuery 1.4.1 .live() может принимать множественные, разделенные запятой события, аналогичные функциональной возможности, предоставленной в .bind(). Например, мы можем "прикрепить в живую" события mouseover и mouseout в одно и то же время, как:

$('.hoverme').live('mouseover mouseout', function(event) {
 if (event.type == 'mouseover') {
 // do something on mouseover
 } else {
 // do something on mouseout
 }
});

Данные события

Начиная с jQuery 1.4, опциональный параметр eventData позволяет нам передавать дополнительную информацию в обработчик. Одно удобное применение этого параметра, это обход проблем, связанных с закрытием. Смотрите обсуждение метода .bind() "Передача данных событий" для более подробной информации.

Контекст события

Начиная с jQuery 1.4, живые события могут быть прикрепленны к "контексту" элемента DOM, а не к корню документа, по умолчанию. Для определения этого контекста, мы используем второй аргумент функции jQuery(), переданный в единственный элемент DOM (в противовес к коллекции jQuery или селектору).

$('div.clickme', $('#container')[0]).live('click', function() {
 // Live handler called.
});

Обработчик live в этом примере вызывается только тогда, когда <div class="clickme"> это потомок элемента с идентификатором "container."

Предостережения

Техника .live() является полезной, но из-за своего особого подхода не может быть просто заменена на .bind() во всех случаях. Конкретные различия включают в себя:

• Методы обхода DOM не полностью поддерживаются для нахождения элементов для отправки в .live(). Пожалуй, метод .live() всегда должен быть вызван непосредственно после выбора, как в приведенном выше примере.
• Чтобы остановить дальнейшие обработчики от исполнения после первого связывания используя .live(), обработчик должен вернуть false. Вызов .stopPropagation() не решит эту задачу.
• В jQuery 1.3.x только следующие события JavaScript (в дополнение к пользовательским событиям) могут быть прикрепленны с .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, и mouseup.

• Начиная с jQuery 1.4 метод .live() поддерживает пользовательские события так же как и все события JavaScript. Начиная с jQuery 1.4.1 даже focus и blur работают с методом live (соответствующие более подходящим событиям focusin и focusout).
• Начиная с jQuery 1.4.1 событие hover может быть определенно (соответствует mouseenter и mouseleave, которые, в свою очередь, соответствуют mouseover и mouseout).