javascript - 使用 fetch 和 forEach 对动态 HTML 进行事件绑定(bind)

Question

我正在尝试在下面显示的 HTML 元素上添加一个事件监听器，它在 forEach 循环中动态生成。我最初从 JSON Placeholder API 获得了正确的响应，但是，当我尝试事件时，我尝试在初始响应后生成的任何 HTML 元素上绑定(bind)事件似乎都没有产生结果。

我要么根本没有“点击”，要么……addEventListener 不是一个函数，这取决于我放置 addEventListener 代码的位置。

有没有办法以一种干净且可重复使用的方式实现这一点？另外，这是通过 vanilla JS 生成动态 HTML 的首选方式吗？或者我应该手动生成它，例如使用 document.createElement() 和 appendChild()？

最终，我打算将点击目标的 ID 传递给 getPosts 函数获取 URL。

如有任何帮助，我们将不胜感激!

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(data => createResult(data));

function createResult(data) {
  const container = document.getElementById('result');

  data.forEach((user) => {
    const { id, name, email, address: { city, street } } = user;

    let result =
      `<div class="user" data-uid=${id}>
          <h5 id="user-${id}"> User ID: ${id} </h5>
            <ul class="w3-ul">
              <li> User Full Name : ${name}</li>
              <li> User Email : ${email} </li>
              <li> User Address : ${city}, ${street} </li>
            </ul>
        </div>`;

    container.innerHTML += result;
    
    document.body.addEventListener("click", function (e) {
      if (e.target &&
        e.target.classList.contains("user")) {
        console.log('Clicked');
      }
    });
  });
}

function getPosts(e) {
  fetch(`https://jsonplaceholder.typicode.com/users/${user.id}`)
    .then(res => res.json())
    .then(data => console.log(data));
}

<div id=result></div>

Answer 1

您应该使每个结果成为一个元素，并仅向该元素添加事件监听器

let element = document.createElement('div')
element.innerHTML = result
element = element.firstChild

element.addEventListener("click", function (e) {
  console.log('Clicked', element.getAttribute('data-uid'));
});

container.appendChild(element);

可运行示例

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(data => createResult(data));

function createResult(data) {
  const container = document.getElementById('result');

  data.forEach((user) => {
    const { id, name, email, address: { city, street } } = user;

    let result =
      `<div class="user" data-uid=${id}>
          <h5 id="user-${id}"> User ID: ${id} </h5>
            <ul class="w3-ul">
              <li> User Full Name : ${name}</li>
              <li> User Email : ${email} </li>
              <li> User Address : ${city}, ${street} </li>
            </ul>
        </div>`;

    let element = document.createElement('div')
    element.innerHTML = result
    element = element.firstChild
    
    element.addEventListener("click", function (e) {
      console.log('Clicked', element.getAttribute('data-uid'));
    });
    
    container.appendChild(element);
  });
}

function getPosts(e) {
  fetch(`https://jsonplaceholder.typicode.com/users/${user.id}`)
    .then(res => res.json())
    .then(data => console.log(data));
}

<div id=result></div>