Яка різниця між jQuery .live () та .on ()

85

Я бачу, що .on()в jQuery 1.7 є новий метод, який замінює .live()попередні версії.

Мені цікаво дізнатись різницю між ними та переваги використання цього нового методу.

jquery  jquery-1.7 
— ajbeaven
джерело

Відповіді:

99

Це досить ясно в документації , чому ви не хотіли б використовувати в прямому ефірі. Також, як згадував Фелікс, .onце більш раціональний спосіб приєднання подій.

Використання методу .live () більше не рекомендується, оскільки пізніші версії jQuery пропонують кращі методи, які не мають своїх недоліків. Зокрема, із використанням .live () виникають такі проблеми:

  • jQuery намагається отримати елементи, вказані селектором, перед викликом .live()методу, що може зайняти багато часу для великих документів.
  • Методи ланцюгового з'єднання не підтримуються. Наприклад, $("a").find(".offsite, .external").live( ... ); це НЕ діє і не працює , як очікувалося.
  • Оскільки всі .live()події прикріплені до documentелемента, події проходять найдовший і найповільніший шлях до їх обробки.
  • Виклик event.stopPropagation() обробника подій неефективний для зупинки обробників подій, прикріплених нижче в документі; подія вже розповсюджена на document.
  • У .live()методі взаємодіє з іншими методами подій способів , які можуть бути дивно, наприклад, $(document).unbind("click")видаляє всі обробник клацання приєднаних будь-якого виклику .live()!
— азіз панджані
джерело
8
Просто цікаво, якщо це справа, чому б їм не вдосконалити метод live, замість того, щоб створити новий метод on. Хіба що в прямому ефірі можна щось зробити, але не на?
— neobie
1
@neobie, Це робить ваш код більш значущим та має однаковість
— Ом Шанкар
@neobie: Я думаю, це для підтримки зворотної сумісності. Різниці, на які вказано у цій відповіді, показують, як їх поведінка дещо відрізняється. Якби вони live()були змінені, щоб мати поведінку on(), це може зламати існуючий код. Люди jQuery показали, що їм не обов'язково боятися "зламати" застарілий код, але, я гадаю, у цьому випадку вони вирішили, що має сенс не ризикувати вводити регресії.
— rinogo
Схоже, це так. live()було припинено в 1.7 і видалено в 1.9. api.jquery.com/live
— rinogo
11

Однією з різниць, на яку люди натрапляють, переходячи з .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().

Це пояснюється тут у документації, але це досить легко пропустити.

— ajbeaven
джерело
2 
.live()

Цей метод використовується для приєднання обробника подій для всіх елементів, які відповідають поточному селектору, зараз і в майбутньому.

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

і 

.on()

Цей метод використовується для приєднання функції обробника подій для однієї або кількох подій до вибраних елементів нижче.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
— Мохаммед Абрар Ахмед
джерело
1

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

Цитата з наведеного посилання

Що не так з .live ()

Використання методу .live () більше не рекомендується, оскільки пізніші версії jQuery пропонують кращі методи, які не мають своїх недоліків. Зокрема, із використанням .live () виникають такі проблеми:

  1. jQuery намагається отримати елементи, вказані селектором, перед викликом методу .live (), що може зайняти багато часу для великих документів.
  2. Методи ланцюгового з'єднання не підтримуються. Наприклад, $ ("a"). Find (". За межами сайту, .external"). Live (...); не є дійсним і не працює належним чином.
  3. Оскільки всі події .live () прикріплені до елемента документа, події проходять найдовший і найповільніший шлях до їх обробки.
  4. Виклик event.stopPropagation () в обробнику подій неефективний при зупинці обробників подій, прикріплених нижче в документі; подія вже розповсюджена на документ.
  5. Метод .live () взаємодіє з іншими методами подій способами, які можуть бути несподіваними, наприклад, $ (document) .unbind (“click”) видаляє всі обробники кліків, приєднані будь-яким викликом .live ()!
— венкат
джерело
0

для отримання додаткової інформації перевірте .. .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" );
        });

і це працює досить здорово ...

— Хірен
джерело
Ласкаво просимо до SO. Приємно спробуйте детальніше розробити свої відповіді, а не просто надавати посилання, відповіді лише на посилання тут вважаються поганою практикою.
— mata
Дякую .. Я пам’ятатиму це про майбутню відповідь .. :)
— Hiren,
0

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

Я переїхав до, .on()але це також не працює. Він не приєднує слухач, коли документ змінюється - тому я повернувся до використання .live(). Це помилка, про яку я думаю .on(). Тільки будь обережним, думаю.

— PixelPerfect3
джерело
10
Напевно, ви використовуєте його неправильно - він має дещо інший синтаксис до .live()методу. Еквівалент .on()для $('p').live('click', function () { alert('clicked'); });є $(document).on('click', 'p', function () { alert('clicked'); });. Зверніть увагу, що ви використовуєте .on()метод на, documentа потім вказуєте елемент, який ви хочете приєднати обробник події для прослуховування, у своєму другому параметрі.
— ajbeaven
1
Детальніше про це ви можете прочитати тут: api.jquery.com/on . Подивіться під заголовком Прямі та делеговані події
— ajbeaven
1
Я б запропонував прочитати і цю статтю: elijahmanor.com/2012/02/…
— ajbeaven
1
Ми також можемо зробити $ (selector1) .on (подія, selector2, функція), де selector1 є батьківським, а selector2 є нащадком selector1. Це мінімізує область пошуку, оскільки вам не потрібно шукати весь документ.
— Рамшаран,
1
@ajbeaven ви повинні перетворити свій перший коментар тут на відповідь (це те, що я шукав, коли прибув сюди).
— atwright147
-1

У мене є вимога ідентифікувати закриту подію браузера. Після проведення досліджень я виконую наступні дії за допомогою jQuery 1.8.3

  1. Увімкніть прапорець, використовуючи наступний jQuery, коли натискається гіперпосилання

    $ ('a'). live ('click', 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, це не запускається вчасно

— NS
джерело
1
Це неправда, ви, мабуть, використовуєте .onнеправильно, або щось інше у вашому коді спричиняє це. Можливо, вставте свій код для свого .onметоду.
— ajbeaven
Ага. Це не правда. .on () - це вдосконалена версія .live (). Отже, вставте свій код сюди. Щоб ми мали ясність
— RecklessSergio
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.