Превращение live() в on() в jQuery

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

Я традиционно использовал JQuery's live() метод обнаружения, когда один из этих выпадающих change()изд:

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

Начиная с jQuery 1.7, я обновил это до:

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

Глядя на документы, это должно быть совершенно правильно (верно?) - но обработчик событий никогда не срабатывает. Конечно, я подтвердил, что jQuery 1.7 загружен и работает и т. Д. В журнале ошибок нет ошибок.

Что я делаю неправильно? Спасибо!

Источник

5 ответов

Решение

on Документация гласит (выделено жирным шрифтом;)):

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

Эквивалентно .live() было бы что-то вроде

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

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

Обновление: отвечая на другой вопрос, я узнал, что это также упоминается в .live документация:

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

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+
Источник

В дополнение к выбранному ответу,

порт jQuery.live на jQuery 1.9+, пока вы ждете миграции приложения. Добавьте это в свой файл JavaScript.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

Примечание: вышеуказанная функция не будет работать в jQuery v3, так как this.selector устранен.

Или вы можете использовать https://github.com/jquery/jquery-migrate

Источник

Просто нашел лучшее решение, которое не включает редактирование стороннего кода:

https://github.com/jquery/jquery-migrate/

Установите пакет jQuery Migrate NuGet в Visual Studio, чтобы устранить все проблемы с версиями. В следующий раз, когда Microsoft обновит свои ненавязчивые модули AJAX и проверки, возможно, попробуйте снова без сценария перенастройки, чтобы увидеть, решили ли они проблему.

Поскольку jQuery Migrate поддерживается jQuery Foundation, я думаю, что это не только лучший подход для сторонних библиотек, но и для получения предупреждений для ваших собственных библиотек с подробным описанием того, как их обновлять.

Источник

В дополнение к выбранным ответам,

Если вы используете Visual Studio, вы можете использовать Regex Replace.
В меню "Правка"> "Найти и заменить"> "Заменить в файлах"
Или Ctrl + Shift + H

Во всплывающем окне "Найти и заменить" установите эти поля

Найти то, что: \$\((.*)\)\.live\((.*),
Заменить: $(document.body).on($2,$1,
В настройках поиска установите флажок "Использовать регулярные выражения".

Источник

JQuery Verision XXXJS открыть редактор, найти jQuery.fn.extend

добавить код

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

Пример: jquery-2.1.1.js -> строка 7469 (jQuery.fn.extend)

Пример просмотра изображений

Источник
Другие вопросы по тегам