如何为JavaScript动态创建的div绑定addEventListener？

你绑定事件的代码是在页面初始加载时执行的，这时候只有已经存在于DOM中的静态.card元素会被获取并绑定点击事件。而通过createCard动态创建的.card元素是在这之后才被添加到页面中的，自然不会被初始的事件绑定代码覆盖，所以点击这些动态元素没有响应。按钮能正常运行是因为它们是页面加载时就存在的静态元素，初始的事件绑定代码能获取到它们并绑定事件。

方法1：创建元素时直接绑定事件 #

修改createCard函数，在生成card元素的同时直接为其添加点击事件：

const createCard=(data)=>{
    const div=document.createElement("div")
    div.classList.add("card")
    // 直接给当前创建的card绑定点击事件
    div.addEventListener('click',()=>{
        console.log("Hello")
    })
    div.innerHTML=`
    <h1>${data.name}</h1>
    <img src=${data.sprites.other.dream_world.front_default} alt=${data.name}></img>
    <p>${data.base_experience}</p>
    `
    return div
}

这样每一个动态生成的card元素在创建时就自带点击事件，添加到DOM后就能正常响应点击。

方法2：使用事件委托（更推荐） #

不需要给每个card单独绑定事件，而是给它们的父容器绑定事件，利用事件冒泡机制监听点击。假设所有card最终都会被添加到#card-container这个父容器中：

// 给父容器绑定事件
document.querySelector('#card-container').addEventListener('click',(e)=>{
    // 检查点击的目标是否属于.card元素（包括其子元素触发的点击）
    if(e.target.closest('.card')){
        console.log("Hello")
    }
})

这种方式的优势是：不管是静态还是动态创建的card，只要属于这个父容器，点击时都会触发事件，无需再单独给新元素绑定事件，代码更简洁高效。

内容的提问来源于stack exchange，提问作者Muskan Verma