Включение live() в on() в jQuery

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

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

$('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 и т.д. В журнале ошибок нет ошибок.

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

Ответы

Ответ 1

В 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+

Ответ 2

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

Порт jQuery.live для jQuery 1. 9+, пока вы ждете перехода приложения. Добавьте это в свой файл JavaScript.

// Borrowed from jQuery 1.8.3 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;
        }
});

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

Ответ 5

jquery verision x.x.x.js открыть редактор, найти 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)

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