事件委派不适用于动态按钮
事件委派不适用于动态按钮
提问于 2020-10-22 01: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函数，则会出现一个用户对象。我真的不知所措，不知道如何让它工作。请帮帮我！
回答 1
Stack Overflow用户
发布于 2020-10-22 01:46:58
因为函数userData正在进行异步调用，所以问题似乎是在创建类为'.list-group'的元素之前添加了click事件处理程序。您应该使用类似下面的代码来添加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的末尾
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64468475
复制相关文章
相似问题
腾讯云开发者
