时间戳

首页 > 解决方案 > 动态 HTML 上的事件绑定，使用 fetch 和 forEach 内

javascript - 动态 HTML 上的事件绑定，使用 fetch 和 forEach 内

问题描述

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

我要么根本没有“点击”，要么......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>

标签： javascriptdomforeachfetchaddeventlistener

解决方案

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

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>

推荐阅读