Какая разница между jQuery.live() и .on()

Я вижу там новый метод .on() в jQuery 1.7, который заменяет .live() в более ранних версиях.

Мне интересно узнать разницу между ними и преимуществами этого нового метода.

Ответ 1

В docs довольно ясно, почему вы не хотите использовать live. Кроме того, как упоминалось Феликс, .on - это более простой способ привязки событий.

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


jQuery пытается извлечь элементы, указанные селектором, перед вызовом метода .live(), который может быть занимая много времени на больших документах.
Цепочки не поддерживаются. Например, $("a").find(".offsite, .external").live( ... ); недействителен и не работает должным образом.
Поскольку все события .live() привязаны к элементу document, события занимают самые длинные и самые медленные возможный путь до того, как они будут обработаны.
Вызов event.stopPropagation()в обработчике событий неэффективен при остановке обработчиков событий прилагается ниже в документе; событие уже распространилось на document.
Метод .live() взаимодействует с другими методами событий способами, которые могут быть неожиданными, например, $(document).unbind("click") удаляет все обработчики кликов прикрепленный любым вызовом .live()!

Ответ 2

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

Вот пример синтаксиса, который мы использовали для метода .live():

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Теперь, когда .live() устарел в jQuery версии 1.7 и удален в версии 1.9, вы должны использовать метод .on(). Здесь приведен пример с использованием метода .on():

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Обратите внимание, что мы вызываем .on() против документа, а не самой кнопки. Мы указываем селектор для элемента, события которого мы слушаем во втором параметре.

В приведенном выше примере я вызываю .on() в документе, однако вы получите лучшую производительность, если используете элемент ближе к вашему селектору. Любой элемент предка будет работать до тех пор, пока он существует на странице, прежде чем вы вызовете .on().

Это объясняется здесь, в документации, но это довольно легко пропустить.

Ответ 3

См. официальный блог

[..] Новые API.on() и .off() объединяют все способы подключения события в документ в jQuery - и theyre короче, чтобы печатать! [...]

Ответ 4

.live()

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

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

.on()

Этот метод используется для присоединения функции обработчика событий для одного или нескольких событий к выбранным элементам, приведенным ниже.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Ответ 5

Хорошее руководство по разнице между vs live

Цитата из указанной ссылки

Что не так с .live()

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

jQuery пытается получить элементы, указанные селектором перед вызовом метода .live(), который может занять много времени на крупные документы.

Цепочки не поддерживаются. Например, $( "a" ). find ( "offsite,.external" ). live (...); недействительно и делает не работает должным образом.

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

Вызов event.stopPropagation() в событии обработчик неэффективен при остановке обработчиков событий, документ; событие уже распространяется на документ.

.live() взаимодействует с другими методами событий способами, которые могут быть неожиданно, например, $(document).unbind("click") удаляет все клики обработчиков, связанных любым вызовом .live()!

Ответ 6

Я являюсь автором расширения Chrome "Сохранить комментарий" , в котором используется jQuery, и тот, который использовал .live(). То, как работает расширение, заключается в подключении слушателя ко всем текстовым областям с использованием. live() - это сработало, так как всякий раз, когда документ менялся, он все равно присоединял бы слушателя ко всем новым текстовым областям.

Я переехал в .on(), но он не работает. Он не прикрепляет слушателя всякий раз, когда документ изменяется, поэтому я вернулся к использованию .live(). Это ошибка, о которой я думаю в .on(). Пожалуй, будьте осторожны.

Ответ 7

для получения дополнительной информации проверьте это. . live() и .on()

.live() метод используется, когда вы имеете дело с динамической генерацией содержимого... как я создал в программе, которая добавляет вкладку, когда я изменяю значение JQuery Slider, и я хочу добавить функциональность кнопки закрытия на каждую вкладку, которая будет сгенерирована... код, который я пробовал, - это..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

и он отлично работает...

Ответ 8

У меня есть требование идентифицировать событие закрытого браузера. После выполнения исследования, которое я выполняю после использования jQuery 1.8.3

Включите флаг, используя следующий jQuery при нажатии гиперссылки

$('a'). live ('click', function() {cleanSession = false;});
Включите флаг, используя следующий jQuery, когда нажата кнопка ввода кнопки ввода времени

$( "input [type = submit]" ). live ('click', function() {alert ( "нажата кнопка ввода" ); cleanSession = false;});

Включить флаг, используя следующий jQuery, когда возникает какая-либо форма времени.

$('form'). live ('submit', function() {cleanSession = false;});

Теперь важная вещь... мое решение работает, только если я использую .live вместо .on. Если я использую., То событие запускается после отправки формы, и это слишком поздно. Много раз мои формы отправляются с помощью javascript call (document.form.submit)

Таким образом, существует ключевое различие между .live и .on. Если вы используете .live, ваши события немедленно запускаются, но если вы переключитесь на .on, то он не будет запущен вовремя.