Превращение live () в on () в jQuery - PullRequest
Новая
       7

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

196 голосов
/ 05 ноября 2011

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

Я традиционно использовал метод 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 загружен и работает и т. Д. В журнале ошибок нет ошибок.

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

Ответы [ 5 ]

241 голосов
/ 05 ноября 2011

Документация 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+
25 голосов
/ 21 марта 2013

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

Порт 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

7 голосов
/ 30 января 2013

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

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

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

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

3 голосов
/ 11 февраля 2014

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

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

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

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

0 голосов
/ 06 мая 2016

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)

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

...