Должен ли я использовать .live (...)? - PullRequest
Новая
       28

Должен ли я использовать .live (...)?

2 голосов
/ 13 марта 2011

Когда я использую jQuery для прикрепления событий к элементам, я обычно делаю это так: 

$(document).ready(function() {
    $('#some_id').click(function() {
        // Do some stuff
    });
});

Однако я видел несколько примеров, которые делают это так: 

$('#some_id').live('click', function() {
    // Do some stuff
});

(Почти всегда без оболочки ready.)

Есть ли недостаток в том или ином случае, если элементы уже находятся на странице и никуда не денутся?

Ответы [ 7 ]

8 голосов
/ 13 марта 2011

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

  1. необходимо связать большое количество элементов с одним и тем же обработчиком событий или
  2. элементы часто добавляются или удаляются.

.live() работает, подключая обработчик событий к document и проверяя, соответствует ли event.target указанному селектору.Это приводит к:

  • ненужным проверкам селектора при нажатии элементов , отличных от #some_id.
  • нет возможности stopPropagation() события сон уже достиг корня (хотя вы все еще можете preventDefault()).
  • аналогично, нажмите обработчики кликов, прикрепленные к parent из #some_id (через .click() или .bind()), которыеreturn false или stopPropagation() отключит обработчики, подключенные через .live(), так как событие больше не достигнет корня.
  • оно может только использоваться с селектором (строка).
  • может возникнуть непредвиденный порядок обработки событий, так как события будут запускаться в порядке их привязки, а не в порядке пузырьков (дочерний к родительскому).
  • событиене удаляется, если элемент удален.
  • , хотя редко, вы не можете .triggerHandler() для элемента.
2 голосов
/ 13 марта 2011

Недостаток в том, что обработка событий "медленнее". live() присоединяет обработчик кликов к корню документа и использует всплывающее окно для захвата событий из указанных элементов.

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

1 голос
/ 13 марта 2011

Вам нужно только .live(), если будут динамически добавленные элементы.Если DOM статичен, вы можете использовать .click().

Еще несколько предостережений при использовании .live() из официальной документации:

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

Вы будете использовать .live, когда элементы DOM, к которым вы присоединяете события, могут быть изменены / заменены. У него есть дополнительные издержки, так как он будет прослушивать модификации DOM. Поэтому используйте его, только если вы знаете, что элементы DOM будут изменены, чтобы избежать необходимости их повторного присоединения. Например, если вы используете AJAX для замены частей вашей страницы каким-либо новым контентом, и эти части содержат элементы DOM, к которым вы прикрепляли события, вам нужно использовать .live. В противном случае используйте стандарт .click.

0 голосов
/ 13 марта 2011

вы можете использовать .delegate http://api.jquery.com/delegate/

0 голосов
/ 13 марта 2011

Причинами использования метода .live() могут быть динамически добавленные, созданные или загруженные элементы DOM.Например, вы динамически, через AJAX-вызов, загружаете форму и хотите связать, чтобы «отправить» событие этой формы некоторой функции обратного вызова.Вы можете сделать это вручную, когда процесс загрузки формы завершен, или вы можете просто использовать метод .live() один раз и забыть об обработке этой формы каждый раз, когда она загружается.

ps были проблемы с .live() и sumbit, но я надеюсь, что они были исправлены.

0 голосов
/ 13 марта 2011

.live работает как *live* список узлов, что означает, что к узлам, добавляемым вами после вызова (соответствующего селектору css), также будет добавлен обработчик.

Первый вызов добавляет обработчик только к узлам, которые соответствуют селектору css во время вызова .

В вашем примере ваш селектор CSS - #some_id. Если позже вы добавите несколько узлов с одинаковым идентификатором (то есть some_id), эти узлы будут добавлены обработчиком с .live(), но не с первым вызовом.

...