Javascript 如何向动态创建的元素添加类

我想将侦听器添加到JavaScript中动态创建的元素中，但它似乎不起作用。它不会出错，所以我不知道该从什么开始。你有什么想法吗

{
const API_KEY=“9829fe5eab6c963bbe4850df2d7de4aa”；
const container=document.getElementById（“容器”）；
常量flippers=document.getElementsByClassName（“header_u_flipper”）；
const cityTemplate=（）=>{
常量模板=`
&rarr；
dfgdfgd
`;
返回模板；
};
const addListeners=（集合、ev、fn）=>{
for（设i=0；i{
常量url=`https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`；
获取（url）。然后（（res）=>{
res.json（）.then（（数据）=>{
container.innerHTML+=cityTemplate（数据）；
});
})
}
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
addListeners（翻转器，“单击”，（）=>{
警报（“测试”）；
})
}

---

您需要使用下面的代码片段为动态创建的元素触发单击事件

$(document).on("click", ".className", function(){
    alert('this works')
});

---

对于JavaScript解决方案，您可以参考以下内容：

您需要使用下面的代码片段为动态创建的元素触发单击事件

$(document).on("click", ".className", function(){
    alert('this works')
});

---

对于JavaScript解决方案，您可以参考以下内容：

核心问题是由于

req（）

函数是异步的，这意味着调用了

req（）

函数，但它会在将来的某个未知点结束。当每个

req（）

正在等待完成时，脚本将继续，并使用

.header\uu flipper

选择器调用

addListeners（）

函数-但由于异步行为，

.header\uu fliper

元素尚未创建，因此未添加事件侦听器

作为演示，我在

addListeners（）

函数中添加了一个超时，以便在调用之前等待1秒。这使

req（）

函数有时间完成，并允许事件侦听器正确连接

但是-

setTimeout（）

不是解决方案-下面的代码片段仅用于演示问题，向下滚动以获得正确的解决方案

{
const API_KEY=“9829fe5eab6c963bbe4850df2d7de4aa”；
const container=document.getElementById（“容器”）；
const cityTemplate=（）=>{
常量模板=`
&rarr；
dfgdfgd
`;
返回模板；
};
const addListeners=（集合、ev、fn）=>{
for（设i=0；i{
常量url=`https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`；
获取（url）。然后（（res）=>{
res.json（）.then（（数据）=>{
container.innerHTML+=cityTemplate（数据）；
});
})
}
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
//仅供演示
//req（）函数是异步的，因此addListeners（）函数在创建元素之前试图附加到元素
setTimeout（函数（）{
addListeners（document.getElementsByClassName（“header\uu flipper”），“click”，（）=>{
警报（“测试”）；
})
}, 1000)
}

---

核心问题是由于

req（）

函数是异步的-这意味着调用了

req（）

函数，但它在将来的某个未知点完成。当每个

req（）

正在等待完成时，脚本将继续，并使用

.header\uu flipper

选择器调用

addListeners（）

函数-但由于异步行为，

.header\uu fliper

元素尚未创建，因此未添加事件侦听器

作为演示，我在

addListeners（）

函数中添加了一个超时，以便在调用之前等待1秒。这使

req（）

函数有时间完成，并允许事件侦听器正确连接

但是-

setTimeout（）

不是解决方案-下面的代码片段仅用于演示问题，向下滚动以获得正确的解决方案

{
const API_KEY=“9829fe5eab6c963bbe4850df2d7de4aa”；
const container=document.getElementById（“容器”）；
const cityTemplate=（）=>{
常量模板=`
&rarr；
dfgdfgd
`;
返回模板；
};
const addListeners=（集合、ev、fn）=>{
for（设i=0；i{
常量url=`https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`；
获取（url）。然后（（res）=>{
res.json（）.then（（数据）=>{
container.innerHTML+=cityTemplate（数据）；
});
})
}
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
请求（“6695624”，API_密钥）；
//仅供演示
//req（）函数是异步的，因此addListeners（）函数在创建元素之前试图附加到元素
setTimeout（函数（）{
addListeners（document.getElementsByClassName（“header\uu flipper”），“click”，（）=>{
警报（“测试”）；
})
}, 1000)
}

---

问题在于，在

获取

请求完成之前添加事件侦听器。在调用

addListeners

时，触发器还不在DOM中

我已经修改了

req

方法，以返回

fetch

的承诺。使用

承诺。所有
代码将等待所有三次提取完成。这仍然不能完全解决问题，代码知道什么时候完成抓取，但是不能