javascript - 使用 insertAdjacentHTML 加载内容后，querySelectorAll 返回空 NodeList

Question

所以我现在搜索了5个小时，没有得到任何答案。

情况：我正在将数据库中的内容加载到我的 HTML 站点并使用 insertAdjacentHTML 将其插入。内容也正确显示，所有数据都在这里。单击之前插入的元素之一时，我想展开卡片。我的事件侦听器适用于我的测试 HTML 内容，但不适用于插入的内容。整个事情都不起作用，因为 .querySelectorAll 返回一个空的 NodeList。

我试图放置脚本，将内容加载到头部和将事件侦听器保存到最后的脚本，但没有任何变化。实际上，使用开发者工具观看时，内容在 HTML 文件中。

希望任何人都可以帮助我：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';
      }
    });
  });
});

标签： javascripthtmlselectors-apiinsertadjacenthtml