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

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

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

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

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

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

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

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

.live()

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

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

а также

.on()

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

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

Хорошее руководство по разнице между онлайн и живым

Цитата из ссылки выше

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

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

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

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

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

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

и работает очень круто...

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

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

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

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

   $('a').live('щелчок', function() {cleanSession = false;});

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

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

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

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

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

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