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

无论我怎么尝试，.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);
    });
}

document.addEventListener（'DOMContentLoaded'，function（）{
用户数据（）；
document.querySelector（“.list group”）.addEventListener（'click'，函数（e）{
if（e.target&&e.target.nodeName==“按钮”）{
console.log（e.target.id）；
}
});
})
函数userData（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（用户=>{
const h6=document.createElement（“h6”）；
h6.innerText=“用户列表”；
const userList=document.createElement（“div”）；
userList.className=“列表组”；
users.forEach（函数（用户）{
const userButton=document.createElement（“按钮”）；
userButton.className=“列表组项目列表组项目操作”；
userButton.id=`${user.id}`；
userButton.innerHTML=`
${user.name}

${user.email}

${user.address.city}

`;
appendChild（userButton）；
});
const container=document.querySelector（“#response”）；
容器。附属物（h6）；
container.insertBefore（userList，h6.nextSibling）；
});
}
函数userSelect（用户标识）{
取回(`https://jsonplaceholder.typicode.com/users/${user\u id}`）
.then（response=>response.json（））
。然后（用户=>{
console.log（用户）；
});
}

---

我现在拥有的是一个用户列表，最终我希望能够单击某个用户并显示该用户的全部详细信息。起初，我试图使用onclick函数重定向到userSelect函数，但失败后，我环顾四周，发现事件委派仍然没有成功。我试图将userData函数末尾的

document.querySelector（'.list组）

部分向下移动，但仍然没有成功。当我点击一个按钮时，控制台中没有显示任何内容，如果我直接在控制台中使用userSelect函数，就会出现一个用户对象。我真的不知道如何让它工作。请帮忙

由于function

userData

正在进行异步调用，问题似乎是您在创建类为

'的元素之前添加了click事件处理程序。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);
                }
            })
        });
    })

请尝试以下代码段：

document.addEventListener（'DOMContentLoaded'，function（）{
userData（）。然后（响应=>{
document.querySelector（“.list group”）.addEventListener（'click'，函数（e）{
if（e.target&&e.target.nodeName==“按钮”）{
console.log（e.target.id）；
}
})
});
})
函数userData（）{
返回取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（用户=>{
const h6=document.createElement（“h6”）；
h6.innerText=“用户列表”；
const userList=document.createElement（“div”）；
userList.className=“列表组”；
users.forEach（函数（用户）{
const userButton=document.createElement（“按钮”）；
userButton.className=“列表组项目列表组项目操作”；
userButton.id=`${user.id}`；
userButton.innerHTML=`
${user.name}

${user.email}

${user.address.city}

`;
appendChild（userButton）；
});
const container=document.querySelector（“#response”）；
容器。附属物（h6）；
container.insertBefore（userList，h6.nextSibling）；
});
}