querySelectorAll возвращает пустой NodeList после загрузки содержимого с помощью insertAdjacentHTML - PullRequest
Новая
       61

querySelectorAll возвращает пустой NodeList после загрузки содержимого с помощью insertAdjacentHTML

0 голосов
/ 04 марта 2020

Итак, я искал 5 часов и не получил ответа.

Ситуация: я загружаю контент из базы данных на мой HTML сайт и вставляю его с помощью insertAdjacent HTML. Содержание также отображается правильно, и все данные здесь. Я хочу раскрыть карту при нажатии на один из элементов, вставленных ранее. Мой слушатель событий прекрасно работает с моим тестовым содержимым HTML, но не со вставленными. Все это не работает, потому что .querySelectorAll возвращает пустой NodeList.

Я попытался разместить скрипт, который загружает содержимое в заголовок и тот, который содержит слушатель события в конец, но без изменений. На самом деле, содержимое находится в файле HTML при просмотре с помощью Developer Tools.

Надеюсь, что кто-нибудь может мне помочь: D

Это шаблон: 

let markup = `
    <figure class="control__msg" id="${snapshot.key}">
      <div class="control__msg--info">
        <h4>${item.name}</h4>
        <h5>${item.time}</h5>
      </div>
      <div class="control__msg--content" id="content_${snapshot.key}">
        <h4>Email: ${item.email}</h4>
        <h4>Tel.: ${item.phone}</h4>
        <h4>Betreff: ${item.subject}</h4>
        <p>
          ${item.message}
        </p>
      </div>
    </figure>`;

    document.getElementById('messages').insertAdjacentHTML('beforeend', markup);

А вот слушатель события: 

document.addEventListener('DOMContentLoaded', e => {
  let targets = document.querySelectorAll('.control__msg');

  targets.forEach(curr => {
    curr.addEventListener('click', e => {
      let content = document.getElementById(`content_${curr.id}`);

      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
        content.style.animation = 'dropIn .8s 0s forwards ease-out';
      }
    });
  });
});
...