使用 javascript 迭代 NodeList 时无法添加事件

Question

我正在尝试使用 javascript 迭代一个 NodeList 对象，我想要一个点击事件来吃项目：

document.addEventListener("DOMContentLoaded", async () => {
try {

    posts.map(post => {
        container.innerHTML += outPutHtml(post); // user-interaction elements are created with ajax request 
} catch (e) {
    console.error(e);
   
} finally {
    highlight.highlightAll();

});

const elements = document.querySelectorAll(".user-interaction");

console.log(elements); //   NodeList []length: 0[[Prototype]]: NodeList
console.log(typeof elements); // object

elements.forEach(function(element) {
    element.addEventListener("click", function() {
        console.log('ok');
    });
});

元素上的点击事件不起作用！

我该如何解决这个问题？

Answer 1

window.addEventListener("DOMContentLoaded", ()=>{
const elements = document.querySelectorAll(".user-interaction");

console.log(elements); //   NodeList []length: 0[[Prototype]]: NodeList
console.log(typeof elements); // object

elements.forEach(function(element) {
    element.addEventListener("click", function() {
        console.log('ok');
    });
});
});

.user-interaction {
  cursor: pointer;
 }

<div class="user-interaction">1</div>
<div class="user-interaction">2</div>
<div class="user-interaction">3</div>

包装你的逻辑

window.addEventListener('DOMContentLoaded', (event) => {
   console.log('your logic here')
});