Решение: 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() и управление событиями как профессионал.