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

@urban_will 

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

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

1
2
3

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

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