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

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

Я традиционно использовал live()метод jQuery, чтобы определить, когда редактировался один из этих выпадающих списков 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 загружен и работает и т. Д. В журнале ошибок нет ошибок.

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

В 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/#readme

Установите пакет 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)

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