Как обрабатывать событие $('.div-nested').on('click', function() { у ещё не созданных элементов?

Question

[Nentra]

На странице есть элементы:

<div class="div-0">
  <div class="div-nested"> Мы любим животных и стараемся </div>
  <div class="div-nested"> сделать —</div>
  <div class="div-nested">очь приюту для животн</div>
</div>

После успешного выполнения Ajax запроса к ним добавляются ещё элементы с помощью JQuery

<div class="div-0">
 <div class="div-nested"> Мы любим животных и стараемся </div>
  <div class="div-nested"> сделать —</div>
  <div class="div-nested">очь приюту для животн</div>
  <div class="div-nested"> многие известны </div>
  <div class="div-nested"> ективное планирование обеспе</div>
  <div class="div-nested"> ра организации позволяет в</div>
</div>

Как обрабатывать событие $('.div-nested').on('click', function() { на всех в итоге получившихся элементах?
Событие 'click' срабатывает только на уже существующих элементах, на вновь добавленных элементах событие 'click' не работает.

Comments

[ThunderCat]

Как обрабатывать событие $('.div-nested').on('click', function() { на всех в итоге получившихся элементах?

$(document).on('click', '.div-nested', function() {...}

[ForSureN1]

Вариант без использования jquery

document.addEventListener('click',  e => {
    const target = e.target;
    if(target.classList.contains('div-nested') { console.log(target) } 
})

Answer 1

[Вадим]

Либо по средствам делегирования событий (рекомендуется)
И тогда на jQuery будет что-то типа:

$('.div-0').on('click', '.div-nested', function() {...}

Либо при создании элемента добавлять ему обработчик.
И тогда что-то типа:

var d = $('div', {
  class: 'div-nested',
  on: {
    click: function() {}
  }
})

Comments

[Nentra]

у меня почему то только с тегами это работает, например с тегом img, с классами не работает

[Вадим]

Nentra, лучше всего делать демку на codepen с проблемой, так легче всего сказать и показать что делаете не так