事件委派不适用于动态按钮

编程问答 2022-06-07

问题描述

无论我尝试什么，.onclick或addEventListener'click'都不适用于我动态创建的按钮，我也不知道为什么。在寻找解决方案时，我遇到了事件委托，并浏览了3个不同的网站并查看了示例。我确信这将解决我的问题，我尝试模仿这些示例，但仍然无法正常工作。我在这里早些时候发布了一个问题，但是它被删除了，因为显然它与另一个问题（已经十二岁了！）非常相似，但是当我查看该问题时，他们正在使用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函数，但是当失败时，我环顾四周，发现了事件委托，仍然没有运气。我试图将document.querySelector('.list-group)部分移到userData函数的末尾，但还是没有运气。当我单击按钮时，控制台中什么都没有显示，如果我直接在控制台中使用userSelect函数，则会出现一个用户对象。我真的不知道如何使它工作。请帮忙！

解决方法

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

 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);
                }
            })
        });
    })

尝试以下代码段：

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的末尾

event-delegationjavascriptonclickonclickonclick