addEventListener无法绑定至.span、.header元素，仅innerDiv可正常绑定

• 存在两个直接导致事件绑定失效的错误：
  1. 错误操作只读的classList属性
     DOM元素的classList是只读的类数组对象，不能直接用等号赋值字符串。你写的div.classList = 'header'这类代码会被浏览器静默拦截，类名不会真正绑定到元素上，后续靠类名匹配的DOM查找逻辑自然无法正常工作。
  2. 事件绑定的元素选择逻辑不合理
     你已经通过document.createElement拿到了span元素的直接引用，却绕路用全局选择器document.querySelector('.span')检索元素绑定事件。就算类名设置成功，后续多次调用createModal生成多个模态框时，这个全局选择器只会匹配到页面第一个带.span类的元素，新生成的关闭按钮永远无法绑定事件。
• 若修正后事件仍无法触发，需排查样式问题：检查.span元素是否被其他层级更高的元素覆盖，或是否设置了pointer-events: none属性，导致点击动作无法落在目标元素上。

1. 替换错误的类名绑定写法
   给元素设置类名时，要么直接给可写的className属性赋值字符串，要么调用classList.add()方法逐个添加类名，禁止直接给classList赋值。
2. 直接用已持有的元素引用绑定事件
   把绑定事件的目标从全局查询到的元素，替换为已创建好的span变量，省略不必要的DOM查找步骤。
3. 补充关闭模态框的逻辑
   事件触发后直接移除当前模态框对应的wrap容器，即可完成关闭交互。

修正后的核心代码示例：

function createModal(id, className, innerId, wrapName){
    const div = document.createElement('div')
    div.setAttribute('id', 'poem-header'+id)
    // 正确的类名赋值方式
    div.className = 'header'
    const span = document.createElement('span')
    span.className = 'span'
    span.innerHTML = 'X'
    div.appendChild(span)

    const c = document.createElement('div')
    c.setAttribute('id', innerId)
    c.className = 'poem'
    const wrap = document.createElement('div')
    wrap.setAttribute('id', wrapName)
    wrap.className = 'wrap'
    document.body.appendChild(wrap)
    wrap.append(div, c)

    // 直接通过span引用绑定事件
    span.addEventListener('click', function(){
        console.log('working')
        // 实现关闭模态框的核心逻辑
        wrap.remove()
    })
}

document.getElementById('test').addEventListener('click', ()=>{
    document.getElementById('test').setAttribute('disabled', 'true')
    createModal('-0', 'poem0', 'poem0', 'wrap0')
})

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