Решение: jQuery click не работает для динамически созданных <a>

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

$(document).on('click', '#dynamicElement', function() {
    // Вставьте код обработки события здесь
});

Проделайте делегирование событий при помощи метода .on() — это именно то, что вам нужно для динамически добавляемых элементов. Привяжите событие клика к якорю, который всегда доступен в DOM, а затем укажите селектор динамического элемента в качестве второго аргумента. Это гарантирует надёжное привязывание событий клика к элементам, которые появляются в DOM после его загрузки.

Мастерство управления динамически загружаемым контентом

В эпоху Ajax-добавлений именно делегирование событий стало золотым стандартом для привязки событий к элементам, которые динамически появляются на странице. Традиционные методы прямого привязывания событий, такие как когда-то популярный .click(), эффективно работают только с элементами, которые уже присутствуют на странице. Для элементов, добавляемых через Ajax, эффективность этих методов практически нулевая.

Делегирование событий: Общий обзор

Назначьте обработчик события клика на элемент верхнего уровня в DOM — на нечто постоянное, например, document или определённый родительский контейнер, а затем укажите динамический элемент в качестве селектора. В процессе всплытия события, jQuery будет инициировать его обработку.

$(document).on('click', '.futureBTN', function() {
  // Реализуйте функциональность вашей кнопки здесь
});

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

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

Использовать document как якорь для всех всплывающих событий? Это, действительно, рабочий подход. Но лучше выбрать ближайшего статического предка в качестве точки для метода .on(). Тогда событию не нужно будет проходить всё дерево DOM, оно остановится на ближайшем стабильном элементе.

$('#parents-living-room').on('click', '.teenager-coming-home-late', function() {
  // Опять доставка от Domino's?
});

Время от времени: правильный момент для делегирования

Позаботьтесь, чтобы вы внедрили делегирование событий в правильное время — после того, как статический родительский элемент был подготовлен, но до того, как Ajax внесёт новые элементы в ваш DOM. Будьте готовы к необходимости повторной инициализации событий, если DOM изменяется в процессе работы вашего приложения.

Проактивное распространение событий

Всплытие событий — это не чудеса. Это путь, который событие проходит через дерево DOM. Если вы вставляете элемент после вызова Ajax, событие не будет автоматически применяться к нему, если только у вас не установлен обработчик событий, готовый к его реагированию, подобно дворецкому, ожидающему гостей на грандиозном приеме.

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

Знание разницы между прямыми и делегированными обработчиками событий может быть столь же важным, как разница между теплом домашнего очага и путешествием по джунглям. Прямой метод .click() — это надёжный компаньон для статического контента, но он не подходит для динамического контента. Здесь метод .on() демонстрирует свою универсальность, уверенно обрабатывая и текущие, и будущие элементы.

Профилактическая мера

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

$(document).on('click', '.hyper-link-wannabe', function(event) {
  event.preventDefault();
  // Остановимся, гиперссылка, ты останешься здесь.
});

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

Обработчик события клика в jQuery — это радушное приветствие для новых элементов. Однако после вызова AJAX новые элементы (🛸) могут не получить ожидаемого внимания.

До AJAX:  🛸🛸🛸  (С радостью встречаем!)
После AJAX:  🛸🛸🛸  (Ой, можно проходить мимо...)

Но при делегировании событий каждый новый элемент обязательно получит должное внимание:

$(document).on('click', '.Aliens', function() {
  // Приветствуем всех пришельцев!
});

После делегирования:  🛸🛸🛸  (Всех рады видеть!)

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

1. Понимание делегирования событий | Центр обучения jQuery — Подробно о делегировании событий с использованием jQuery.
2. .on() | Документация API jQuery — Изучение официальной документации по методу .on().
3. jQuery.ajax() | Документация API jQuery — Информация о работе с Ajax в jQuery.
4. Всплывание и перехват — Станьте экспертом по всплыванию событий в JavaScript.
5. Руководство по обновлению ядра jQuery 1.9 | jQuery — Почему метод .live() устарел и как адаптироваться к нововведениям.
6. Использование промисов – JavaScript | MDN — Углубленное изучение асинхронных операций с помощью промисов в JavaScript.
7. Использование jQuery .on() и .off() – Andi Smith — Разбор преимуществ использования .on() в сравнении с .bind() и управление событиями как профессионал.