无法将事件侦听器添加到现有 HTML 按钮

Question

我正在做一个Odin项目作业中的待办事项列表项目(全栈开发课程-www.theodinproject.com(。我使用了一种迄今为止效果良好的复合设计模式。然而，有一个HTML按钮我无法添加事件侦听器。奇怪的是，我用类似的代码创建了另一个按钮，效果很好。现在，这些to之间唯一的区别是第一个在.中的一个ìf语句

这就是集装箱级

import Component from './component.js';
export default class Container extends Component{
child;
constructor(){
super();
}
addChild(id, parentId){
document.getElementById(parentId).appendChild(document.createElement('div')); 
document.getElementById(parentId).lastChild.id = id;
document.getElementById(parentId).lastChild.innerHTML = this.child.innerHTML;
document.getElementById(parentId).lastChild.className = this.child.className;
if(document.getElementById(id).className!='check-list'){
document.getElementById(id).innerHTML+="<button id='"+id+"-add-button'>Add</button>";
if(document.getElementById(id).lastChild){
alert('Found');
}
document.getElementById(id).lastChild.addEventListener('click', (e)=>{
e.stopPropagation();
this.child.addChild(id);
});
}
document.getElementById(id).innerHTML+="<button id='"+id+"-remove-button'>Delete</button>";
document.getElementById(id+'-remove-button').addEventListener('click', ()=>{
document.getElementById(parentId).removeChild(document.getElementById(id)); 
});    
let inputs = document.getElementById(parentId).getElementsByClassName('input');
for(let i=0; i<inputs.length; ++i){ 
inputs[i].addEventListener('input', ()=>{
inputs[i].dataset.storage = inputs[i].value;});
}
}
}

在下面的片段中，我在分配事件之前检查按钮是否已找到。实际上，找到了按钮。

if(document.getElementById(id).className!='check-list'){
document.getElementById(id).innerHTML+="<button id='"+id+"-add-button'>Add</button>";
if(document.getElementById(id).lastChild){
alert('Found');
}
document.getElementById(id).lastChild.addEventListener('click', (e)=>{
e.stopPropagation();
this.child.addChild(id);
});
}

当我运行网站时，按钮会被呈现并触发警报。尽管点击那个按钮是没有用的。现在，如果我们看一下下面的片段，我们可以看到它与第一个没有太大区别，它的按钮确实触发了预期的函数。

document.getElementById(id).innerHTML+="<button id='"+id+"-remove-button'>Delete</button>";
document.getElementById(id+'-remove-button').addEventListener('click', ()=>{
document.getElementById(parentId).removeChild(document.getElementById(id)); 
});    

偶然间我换了

document.getElementById(id).lastChild.addEventListener('click', (e)=>{
e.stopPropagation();
this.child.addChild(id);
});

对于

document.getElementById(parent).lastChild.addEventListener('click', (e)=>{
e.stopPropagation();
this.child.addChild(id);
});

结果是将事件添加到父div中的所有对象中，包括我所说的按钮。除此之外，我还试图找出是否存在执行顺序问题或与找不到对象有关的任何问题，但对象肯定找到了。我已经像document.querySelector(idoftheelement).lastChild.addEvenListener一样硬编码了元素的id，但控制台抛出了一个null错误。还检查了这两个问题：将事件侦听器添加到动态创建的按钮和将事件侦听程序添加到未来项目(不带jQuery(->也不好

有人能帮我一下吗？

Answer 1

基于@engaring的回答，我将事件创建代码下移了几行，以确保在分配事件之前创建了按钮。是的，干杯！

import Component from './component.js';
export default class Container extends Component{
child;
constructor(){
super();
}
addChild(id, parentId){
document.getElementById(parentId).appendChild(document.createElement('div')); 
document.getElementById(parentId).lastChild.id = id;
document.getElementById(parentId).lastChild.innerHTML = this.child.innerHTML;
document.getElementById(parentId).lastChild.className = this.child.className;
if(!document.getElementById(id).classList.contains('check-list')){
document.getElementById(id).innerHTML+="<button id='"+id+"-add-button'>Add</button>";
}
this.removeSelf(id);
if(document.getElementById(id+'-add-button')){
document.getElementById(id+'-add-button').addEventListener('click', (e)=>{
alert(e.currentTarget);
e.stopPropagation();
this.child.addChild(id);
});
}
let inputs = document.getElementById(parentId).getElementsByClassName('input');
for(let i=0; i<inputs.length; ++i){ 
inputs[i].addEventListener('input', ()=>{
inputs[i].dataset.storage = inputs[i].value;});
}
}
}