JQuery.on не работает, но .live делает

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

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

$('table.accordion-header').live("click", function ($e) {
  // gobs of code
}

... и он работает просто отлично (т.е. - событие click click тега my table появляется даже после появления асинхронных обратных ссылок на странице). Но если я изменю код на следующий

$('table.accordion-header').on("click", function ($e) {
  // gobs of code
}

то событие click больше не возникает после появления асинхронных обратных сообщений на странице. Обратите внимание: событие click действительно работает с любыми асинхронными postbacks, , но впоследствии оно больше не работает. Так что мне здесь не хватает?

Ответ 1

Эквивалент

$('table.accordion-header').live("click", function ($e) {
  // gobs of code
} );

является

$(document).on("click", 'table.accordion-header', function ($e) {
  // gobs of code
} );

Ответ 2

На такие вопросы ответили много, много раз, поскольку кажется довольно распространенным, что люди не совсем понимают, как работает динамическая версия .on(). Вы используете статическую форму .on(), где объект должен существовать во время вызова .on(), когда вы, вероятно, собираетесь использовать динамическую форму .on() следующим образом:

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) {
  // code
}

.live() был заменен на .on(), потому что .on() позволяет вам повысить производительность, указав статический родительский объект динамического объекта, чтобы привязать обработчик событий к тому, что более эффективно, привязывая его к document объект, который был .live(). Я бы посоветовал вам прочитать эти предыдущие ответы (все написанные мной), чтобы лучше понять, как наилучшим образом использовать .on(). Эти ответы также включают комментарии о наиболее эффективном способе использования .on() и краткое описание того, как это работает:

jquery: on vs live

Работает ли jQuery.on() для элементов, которые добавляются после создания обработчика событий?

Как новый метод on() jQuery сравнивается с методом live() в производительности?

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

Почему бы не перенести событие Javascript в крайнее?

Ответ 3

В источнике jQuery 1.7.2 "live" в значительной степени указывает на "on", поэтому эта проблема, вероятно, не связана с функцией "on". Это должно быть исключено. Селектор для включения может быть проблемой.

Источник jQuery:

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

Ответ 4

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

Способ $(this) с .on() также не очевиден.

$(document).on("click", 'table.accordion-header', function ($e) {
  // gobs of code
} );

В приведенном выше примере $(this) в вашем функциональном коде будет ссылаться на $('table.accordion-header'), а не $(document), как вы могли ожидать.

Дальнейшее объяснение здесь: . on() с $(this)

Ответ 5

Лучший способ, который я могу выразить, - это, как говорится в документации, jQuery в .live() и .on():

В вашем селекторе "$ (селектор)" введите конкретный элемент, который загружается со страницей, а не динамически.
Затем поместите вторичный селектор в метод, где указывается "селектор" - этот МОЖЕТ динамически создаваться.

//so this..
    $('table.accordion-header').live("click", function ($e) {
  // gobs of code
});

//becomes this..   
    $('table').on("click",'.accordion-header', function ($e) {
  // gobs of code
});

Предполагая, что "таблица" загружена на страницу, конечно.