В чем разница между jQuery .live () и .on ()

Question 1

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

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

Question 2

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

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

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

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

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

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

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

Question 3

Одно отличие, на которое люди спотыкаются при переходе от .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().

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

Question 4

Смотрите официальный блог

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

Question 5

.live()

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

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

а также

.on()

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

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

Question 6

Хороший учебник по разнице между on и live

Цитата из приведенной выше ссылки

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

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

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

Методы связывания не поддерживаются. Например, $ («a»). Find («. Offsite, .external»). Live (…); недействителен и не работает должным образом.

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

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

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

Question 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" );
        });

и работает довольно круто ...

Question 8

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

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

Question 9

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

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

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

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

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

$ ('форма'). live ('отправить', функция () {cleanSession = false;});

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

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