添加未附加的事件侦听器答案

【问题标题】：Add Event Listener not attaching添加未附加的事件侦听器
【发布时间】：2021-01-22 23:30:38
【问题描述】：

我可以 console.log 我的 '.span' 元素以及我的 '.header' 元素，但我无法将事件侦听器附加到任何一个。不过，我可以将事件侦听器附加到我的 innerDiv (const c)。

最终，.span 将作为删除模式的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="#">
    <link rel='stylesheet' href='style.css'>
    <script type="text/javascript" src="./index.js" defer></script>
</head>
<body>
    <button id='test'>test</button>
</body>
</html>

function createModal(id, className, innerId, wrapName){
    const div = document.createElement('div')
    div.setAttribute('id', 'poem-header'+id)
    div.classList = 'header'
    const span = document.createElement('span')
    span.classList = 'span'
    span.innerHTML = 'X'
    div.appendChild(span)

    const c = document.createElement('div')
    c.setAttribute('id', `${innerId}`)
    c.classList = 'poem'
    const wrap = document.createElement('div')
    wrap.setAttribute('id', wrapName)
    wrap.classList = 'wrap'
    document.body.appendChild(wrap)
    document.getElementById(`${wrapName}`).append(div, c)

    document.querySelector('.span').addEventListener('click', function(){
        console.log('working')
    })
}
 document.getElementById('test').addEventListener('click', ()=>{
    document.getElementById('test').setAttribute('disabled', 'true')
    createModal('-0', 'poem0', 'poem0', 'wrap0')
 })

【问题讨论】：

标签： javascript html event-handling dom-events

【解决方案1】：

-99999 的 z-index 导致 .wrap 不可点击；点击不是在 it 上注册，而是在其上方可视的元素（即<body>）上注册

移除 z-index，它将是可点击的。

function createModal(id, className, innerId, wrapName) {
  const div = document.createElement('div')
  div.setAttribute('id', 'poem-header' + id)
  div.classList = 'header'
  const span = document.createElement('span')
  span.classList = 'span'
  span.innerHTML = 'X'
  div.appendChild(span)

  const c = document.createElement('div')
  c.setAttribute('id', `${innerId}`)
  c.classList = 'poem'
  const wrap = document.createElement('div')
  wrap.setAttribute('id', wrapName)
  wrap.classList = 'wrap'
  document.body.appendChild(wrap)
  document.getElementById(`${wrapName}`).append(div, c)

  document.querySelector('.span').addEventListener('click', function() {
    console.log('working')
  })
}
document.getElementById('test').addEventListener('click', () => {
  document.getElementById('test').setAttribute('disabled', 'true')
  createModal('-0', 'poem0', 'poem0', 'wrap0')
})

.wrap {
  display: inline-block;
  position: absolute;
  height: 280px;
  width: 250px;
  background-color: rgb(241, 238, 238);
  margin: 0 auto;
  padding-bottom: 1em;
  border: 1px solid rgb(73, 71, 71);
  box-shadow: 5px 3px;
  margin-bottom: 1em;
  overflow: hidden;
}

.header {
  background-color: rgba(255, 255, 255, 0.849);
  padding: 0 .5em;
  border: 1px solid rgb(75, 73, 73);
  color: rgba(39, 37, 37, 0.87);
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
  cursor: grab;
  position: sticky;
}

.span {
  cursor: pointer;
}

.poem {
  display: inline-block;
  width: inherit;
  height: inherit;
  overflow: scroll;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  cursor: help;
}

&lt;button id='test'&gt;test&lt;/button&gt;

【讨论】：