如何解决添加事件侦听器不附加
我可以对我的 '.span' 元素以及我的 '.header' 元素进行 console.log，但我无法将事件侦听器附加到任何一个。不过，我可以将事件侦听器附加到我的 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','wrap0')
})
解决方法
-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','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,0.849);
padding: 0 .5em;
border: 1px solid rgb(75,73,73);
color: rgba(39,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;
}<button id='test'>test</button>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
