Javascript AddEventListener不工作ES6
AddEventListener只连接到最后一个元素,有人能告诉我为什么会发生这种情况吗Javascript AddEventListener不工作ES6,javascript,ecmascript-6,Javascript,Ecmascript 6,AddEventListener只连接到最后一个元素,有人能告诉我为什么会发生这种情况吗 listNote(key, value){ let note = `<div class="mdl-cell--4-col-desktop mdl-card__supporting-text mdl-cell--12-col mdl-shadow--2dp mdl-cell--4-col-tablet mdl-card mdl-cell sticky-note"> <
listNote(key, value){
let note = `<div class="mdl-cell--4-col-desktop mdl-card__supporting-text mdl-cell--12-col mdl-shadow--2dp mdl-cell--4-col-tablet mdl-card mdl-cell sticky-note">
<div class="message">${value}</div>
<div class="date">Created on ${this.date}</div>
<button id=note-${key} class="delete mdl-button mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">Delete
<span class="mdl-button__ripple-container">
<span class="mdl-ripple">
</span>
</span>
</button>
</div>`
this.allnotes.innerHTML += note;
document.querySelector(`#note-${key}`).addEventListener("click", this.deleteNote);
}
listNote(键、值){
请注意=`
${value}
在${this.date}创建
删除
`
this.allnotes.innerHTML+=注释;
document.querySelector(`note-${key}`).addEventListener(“单击”,this.deleteNote);
}
添加新注释时,只需在最后一个元素上添加事件侦听器
相反,我建议如果您想保留解决方案的其余部分,请使用。这样,您就不会在This.allnotes
中重新创建节点,而只是附加新节点。所有旧事件侦听器都保留在旧笔记上
this.allnotes.insertAdjacentHTML('beforeend', note)
首先,我会尝试
id=“note-${key}”
(注意引号)-其次,我会检查开发人员工具控制台是否有错误。。。。嗯,事实上,我会用另一种方式来思考为什么ecmascript 6标签?我在代码中看不到任何不能用简单的老式jsp完成的东西。不要这样编程,把DOM看作是一个巨大的字符串。疼痛会随之而来。