为什么JavaScript运行时创建的元素事件绑定失效？如何解决？

问题原因 #

页面初始化执行JavaScript代码时，#fire_button_creator_button+button这个选择器对应的按钮还不存在——它是点击第一个按钮后才动态创建的。这时候document.querySelector("#fire_button_creator_button+button")会返回null，对null调用addEventListener自然会抛出错误。

解决方法 #

方案1：创建按钮时直接绑定点击事件

把点击逻辑直接写在创建按钮的回调里，按钮一创建就绑定好事件，不用事后查找：

document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
    // 创建按钮并保存到变量
    const fireBtn = document.createElement("button");
    fireBtn.innerText = "now click me,i am fire button";
    // 给新按钮绑定点击事件
    fireBtn.addEventListener("click", function () {
        document.querySelector("p").innerText = "i am fired";
    });
    // 将按钮添加到页面
    document.querySelector("body").appendChild(fireBtn);
})

方案2：使用事件委托

利用事件冒泡机制，把监听绑定到已存在的父元素（比如body）上，通过判断触发事件的元素来执行逻辑：

document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
    document.querySelector("body").appendChild(document.createElement("button")).innerText="now click me,i am fire button";
})

// 给body绑定点击监听，利用事件冒泡捕获点击
document.querySelector("body").addEventListener("click",function (e) {
    // 判断点击的是动态创建的按钮
    if(e.target.previousElementSibling?.id === "fire_button_creator_button"){
        document.querySelector("p").innerText="i am fired";
    }
})

内容的提问来源于stack exchange，提问作者Mohiul Islam