事件委托不适用于动态按钮答案

【问题标题】：Event delegation not working on dynamic buttons事件委托不适用于动态按钮
【发布时间】：2020-10-21 17:09:50
【问题描述】：

无论我尝试什么，.onclick 或 addEventListener 'click' 都无法在我动态创建的按钮上运行，我不知道为什么。在寻找解决方案时，我遇到了事件委托，我浏览了 3 个不同的网站并查看了示例。我确信这会解决我的问题，我试图模仿这些例子，但它仍然无法正常工作。我之前在这里发布了一个问题，但它立即被删除，因为它显然与另一个问题（那是 12 岁！）太相似了，但是当我查看那个问题时，他们使用的是 jQuery。我仍然是 JS 的初学者，所以我更愿意了解如何在普通 JS 中解决这个问题，我希望这不会被删除。

这是我的代码：

document.addEventListener('DOMContentLoaded', function() {
userData();
document.querySelector('.list-group').addEventListener('click', function(e) {
    if(e.target && e.target.nodeName == "BUTTON"){
        console.log(e.target.id);
    }
});

})

function userData() {
    fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(users => {
        const h6 = document.createElement("h6");
        h6.innerText = "List of Users";
        const userList = document.createElement("div");
        userList.className = "list-group";
        users.forEach(function(user) {
            const userButton = document.createElement("button");
            userButton.className = "list-group-item list-group-item-action";
            userButton.id = `${user.id}`;
            userButton.innerHTML = `
            <strong>${user.name}</strong><br>
            ${user.email}<br>
            ${user.address.city}<br>
            `;
            userList.appendChild(userButton);
        });
        const container = document.querySelector('#response');
        container.appendChild(h6);
        container.insertBefore(userList, h6.nextSibling);
    });
}

function userSelect(user_id) {
    fetch(`https://jsonplaceholder.typicode.com/users/${user_id}`)
    .then(response => response.json())
    .then(user => {
        console.log(user);
    });
}

我现在拥有的是一个用户列表，最终我希望能够点击一个用户并显示该用户的完整详细信息。起初我试图使用 onclick 函数重定向到 userSelect 函数，但是当失败时，我环顾四周发现了事件委托，但仍然没有运气。我试图在 userData 函数的末尾将document.querySelector('.list-group) 部分向下移动，但仍然没有运气。当我单击一个按钮时，控制台中没有显示任何内容，如果我直接在控制台中使用 userSelect 函数，则会出现一个用户对象。我真的不知道如何让它发挥作用。请帮忙！

【问题讨论】：

标签： javascript onclick event-delegation

【解决方案1】：

由于函数userData 正在进行异步调用，问题似乎是您在创建类'.list-group' 的元素之前添加了单击事件处理程序。你应该使用这样的东西来添加点击处理程序

 document.addEventListener('DOMContentLoaded', function () {
        userData().then(response => {
            document.querySelector('.list-group').addEventListener('click', function (e) {
                if (e.target && e.target.nodeName == "BUTTON") {
                    console.log(e.target.id);
                }
            })
        });
    })

试试下面的sn-p：

document.addEventListener('DOMContentLoaded', function() {
  userData().then(response => {
    document.querySelector('.list-group').addEventListener('click', function(e) {
      if (e.target && e.target.nodeName == "BUTTON") {
        console.log(e.target.id);
      }
    })
  });
})

function userData() {
  return fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(users => {
      const h6 = document.createElement("h6");
      h6.innerText = "List of Users";
      const userList = document.createElement("div");
      userList.className = "list-group";
      users.forEach(function(user) {
        const userButton = document.createElement("button");
        userButton.className = "list-group-item list-group-item-action";
        userButton.id = `${user.id}`;
        userButton.innerHTML = `
            <strong>${user.name}</strong><br>
            ${user.email}<br>
            ${user.address.city}<br>
            `;
        userList.appendChild(userButton);
      });
      const container = document.querySelector('#response');
      container.appendChild(h6);
      container.insertBefore(userList, h6.nextSibling);
    });
}

<div id="response">
</div>

或者您可以将addEventListener 代码移动到userData 的末尾

【讨论】：