Обращение к динамическим элементам в DOM на JavaScript (jQuery)

Всем привет. Рано или поздно каждый из вас, кто занимается веб-разработкой, столкнетесь с необходимостью обращения к динамически создаваемым элементам на странице и чтения передаваемой через них информации с сервера. Это касается получения данных с бэкенда на фронтенд и обратно асинхронно без перезагрузки страницы. Это может быть, к примеру, чат на Ajax или Websocket. И если мы будем обращаться к элементам, которые отрисовываем в режиме реального времени на странице, привычным нам способом, допустим через событие onclick, таким образом:

1
2
3

$('.element').on('click', function(){
  console.log($(this));
})

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

1
2
3
4
5
6
7

<ul class="list">
  <li data-id="1">Пункт 1</li>
  <li data-id="2">Пункт 2</li>
  <li data-id="3">Пункт 3</li>
  <li data-id="4">Пункт 4</li>
  <li data-id="5">Пункт 5</li>
</ul>

У каждого элемента, который выводится из базы данных должен быть идентификатор. Можно его прописать в атрибут data-id, чтобы удобно было к нему обращаться и было понятно какой именно элемент был задействован. В данном случае будет добавляться li в конец списка и теперь, для того, чтобы обратиться к динамическим элементам, которые были только что созданы и страница при этом не была перезагружена, нам необходимо сначала обратиться к его родителю. Делается это так:

1
2
3

$('.list').on('click', 'li' function(){
  console.log($(this).data('id));
})

Чтобы изобразить это наглядно для лучшего понимания я создал специальную страницу, где можно это протестировать и увидеть, что все работает. Просто откройте консоль в панели разработчика браузера, создавайте новые элементы и кликайте по ним.

Демо

Обладая такими знаниями вы сможете редактировать, удалять динамически создаваемые элементы в режиме реального времени. А написав обработчик на бэкенде сможете сохранять эти данные в БД.

Надеюсь данная инструкция была для вас понятна и полезна. Если что, пишите комментарии или сразу в телегу, там есть канал.