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

@urban_will 

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

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

1
2
3

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

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

@urban_will 

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