Замена метода .live() после обновления jQuery: решение

Быстрый ответ

С появлением jQuery 1.9 метод .live() был признан устаревшим, и был заменен новым методом .on(). Если вам необходимо заменить .live() на .on(), следует использовать следующую конструкцию:

$(document).on("событие", ".селектор", функцияОбработчик);

Для оптимизации производительности рекомендуется использовать специфический родительский элемент вместо $(document) при делегировании событий.

Применение .on() взамен .live()

Переход от метода .live() к .on() потребует некоторой адаптации кода. Предлагаем рассмотреть несколько рекомендаций для эффективного процесса изменения кода:

Делегирование событий через ближайшие элементы-родители

Используя ближайший родительский элемент вместо $(document), вы сэкономите ресурсы.

// использование "#nearestParent" выгоднее, чем использование $(document)
$("#nearestParent").on("click", ".dynamicChild", функцияОбработчик);

Подробнее об этом расскажет наш спикер на видео

Обработка элементов, создаваемых динамически

Элементы, которые добавляются в DOM динамически, требуют делегирования событий через уже существующие в DOM родительские элементы:

// В отличие от `#parentElement`, который всегда был в тени, разработчики всегда на переднем крае
$("#parentElement").on("click", ".dynamicChild", function(){
  // Обработка клика происходит здесь
});

Переписывание устаревшего кода, использующего .live()

Найдите время для рефакторинга кода, чтобы избавиться от зависимости от .live() и увеличить производительность и консистентность вашего проекта.

Визуализация

Воспринимайте .live() как устаревшую технологию, которая больше не актуальна:

jQuery 1.9 – Попытка вызова...
📞⚠️ Метод '.live()' – (Соединение отсутствует)

В то время как метод .on() выглядит солидно и модернизированно:

// .on() навевает мысли о последней модели смартфона – стильный, мощный и очень желанный.
$(document).on('событие', 'селектор', function(){
  // Здесь происходит волшебство кода
});

Эту разницу можно визуализировать таким образом:

Прежде:   📞💔 ['.live()' – Связь отсутствует ]
Теперь: 📱✨ [ Переходите на '.on()' – Соединение установлено!]

Улучшайте свой код в соответствии с актуальными стандартами!

Переход на .on(): Советы и рекомендации

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

Применение плагина jQuery Migrate

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

Создание собственного метода .live()

Если вам нужно срочное решение, вы можете создать свой собственный метод .live(), применив jQuery.fn.extend:

if(typeof jQuery.fn.live === "undefined") {
  jQuery.fn.extend({
    live: function(events, data, callback) {
      if(this.selector) { 
        $(document).on(events, this.selector, data, callback); 
      }
    }
  });
}

Учтите, что это временное решение, и лучшим подходом будет как можно скорее заменить его на .on().

Постепенная миграция

Рефакторинг лучше провести пошаговым образом, проводя тщательное тестирование после каждого внесенного изменения.

Оптимизация селекторов

Оптимизация селекторов, которые используются с .on(), улучшает быстродействие и отзывчивость кода, делая его таким же быстрым, как и разработчик после порции стойкого кофе!

Решение проблем, возникающих при миграции

Переход на метод .on() может привести к некоторым сложностям. Вот несколько советов по их решению:

TypeError: $(...).live is not a function

Проверьте ваш код на ссылки на .live() и замените их. Поиск по коду в вашем редакторе поможет вам быстро находить и исправлять такие ситуации.

Соответствие селекторов и типов событий

Проверьте, что селектор и тип событий в реализации .on() соответствуют задаче и элементам.

Распространение событий

Будьте осторожны с .stopPropagation(), который может быть использован в обработчиках событий и мешать правильному делегированию событий через .on().

Полезные материалы

1. .live() | Документация jQuery API — информация об удалении метода .live() и о возможных альтернативах.
2. Делегирование событий — описание механизма делегирования событий в JavaScript.
3. .on() | Документация jQuery API — официальное руководство по методу .on().
4. Выпущены jQuery 1.9 final, jQuery 2.0 beta, Migrate final | Официальный блог jQuery — описание основных изменений в jQuery 1.9.
5. GitHub – jquery/jquery-migrate: Утилита для помощи в переходе от устаревших API и функций, удаленных из jQuery — Инструмент jQuery Migrate для облегчения улучшения устаревшего кода.
6. Что не так с методом jQuery .live()? – Stack Overflow — обсуждение сообщества есть ли проблемы с .live() и как он сравнивается с .on().
7. Введение в события – Учебник по веб-разработке | MDN — подробное изучение основ работы с событиями в веб-разработке.