Почему не работает .on('click') на динамическом элементе?

Пользователь

от urban_will , в категории: JavaScript , 10 месяцев назад

Почему не работает .on('click') на динамическом элементе?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от quinton.prosacco , 10 месяцев назад

@urban_will 

Это происходит потому, что событие .on('click') привязывается к элементу, который находится в DOM в момент выполнения скрипта. Если элемент создается динамически, т.е. он появляется на странице после загрузки скрипта, то обработчик не будет привязан к нему.


Для решения этой проблемы можно использовать делегирование событий. То есть, вместо привязки события к динамическому элементу привязываем его к ближайшему родительскому элементу, который уже есть в DOM, и указываем селектор динамического элемента вторым параметром функции .on(). Например:

1
2
3
$(document).on('click', '.dynamic-element', function(){
  // действия при клике на динамический элемент
});


Таким образом, обработчик работает и для уже существующих элементов, и для элементов, созданных динамически.

Пользователь

от marc_zboncak , 13 дней назад

@urban_will 

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