JavaScript动态创建按钮事件无法触发问题求助

核心问题 #

你遇到的按钮点击事件失效，根源在于：outerHTML获取的仅是DOM元素的HTML文本内容，完全不包含绑定在DOM对象上的事件监听。当你将这个字符串赋值给innerHTML时，浏览器会基于字符串重新创建一套全新的DOM元素，这些新元素没有任何之前绑定的点击事件，自然无法触发响应。

修复方案（推荐） #

直接将创建好的DOM容器元素追加到目标节点，跳过HTML字符串中转的步骤：

修改addForm函数：

function addForm(doc){
    const form = new complexForm_newProductWithType(doc)
    const target = document.getElementById("doc-selection")
    target.innerHTML = '' // 按需清空原有内容
    target.appendChild(form.container)
}

这种方式会完整保留原DOM元素及其绑定的所有事件监听，按钮点击即可正常触发。

为什么之前的场景能正常运行？ #

之前在PopupModal实例中调用makeButton时，是直接将按钮追加到已存在于页面中的diag.footer元素上，DOM元素没有经过序列化/反序列化的过程，事件监听自然得以保留。

额外优化建议 #

直接赋值classList为字符串的写法不符合DOM API规范，推荐改为拆分类名后逐个添加：

修改makeButton函数：

function makeButton(text, classList, parent, onClick){
    let button = document.createElement('button')
    classList.split(' ').forEach(cls => button.classList.add(cls))
    button.innerHTML = text
    button.addEventListener('click', onClick)
    parent.appendChild(button)
    return button
}

同理修改makeElement函数：

function makeElement(type, classList, parent){
    let el = document.createElement(type)
    classList.split(' ').forEach(cls => el.classList.add(cls))
    parent.appendChild(el)
    return el
}

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