Javascript querySelectorAll不使用克隆项

我试图用javascript中的

cloneNode

方法复制原始容器div在容器内有3个按钮，带有

btn

类，当我复制原始容器div时，复制项中的最后一个元素只是在控制台中打印hello，有什么想法吗

let add=document.querySelector（'.add按钮'）；
const item=document.querySelector（“.container”）；
设btn=document.queryselectoral（'.btn'）；
add.addEventListener（'click'，function（）{
makecopy（）；
});
btn.forEach（el=>{
el.addEventListener（'click'，函数（）{
log（“你好”）
})
});
函数makecopy（）{
让copiedItem=item.cloneNode（true）；
item.parentNode.insertBefore（copiedItem，item）；
}

创造新的
+
+
+

只是显示您在创建新按钮时没有添加新的侦听器。一些调整

let add=document.querySelector（'.add按钮'）；
const item=document.querySelector（“.container”）；
设btn=document.queryselectoral（'.btn'）；
add.addEventListener（'click'，function（）{
makecopy（）；
});
btn.forEach（el=>{
el.addEventListener（'click'，函数（）{
log（“你好”）
})
});
函数makecopy（）{
让copiedItem=item.cloneNode（true）；
item.parentNode.insertBefore（copiedItem，item）；
copiedItem.addEventListener（'click'，function（）{
log（“你好”）
})
}

创造新的
+
+
+

只是显示您在创建新按钮时没有添加新的侦听器。一些调整

let add=document.querySelector（'.add按钮'）；
const item=document.querySelector（“.container”）；
设btn=document.queryselectoral（'.btn'）；
add.addEventListener（'click'，function（）{
makecopy（）；
});
btn.forEach（el=>{
el.addEventListener（'click'，函数（）{
log（“你好”）
})
});
函数makecopy（）{
让copiedItem=item.cloneNode（true）；
item.parentNode.insertBefore（copiedItem，item）；
copiedItem.addEventListener（'click'，function（）{
log（“你好”）
})
}

创造新的
+
+
+

您只在第一组按钮上设置事件侦听器，而不是克隆的按钮。不要在每个按钮上设置侦听器，而是使用允许事件“冒泡”到一个共同的祖先并在那里处理事件。这样，所有新添加的元素都将立即工作，而不需要自己的处理程序，并且只需要设置一个处理程序，而不需要设置多个处理程序

您还拥有一些冗余代码，当您采用这种方法时，这些代码将不再需要

//无需设置调用真实处理程序的匿名处理程序。只是
//注册真实的一个
document.querySelector（“.add按钮”）.addEventListener（'click'，makecopy）；
const item=document.querySelector（“.container”）；
函数makecopy（）{
让copiedItem=item.cloneNode（true）；
item.parentNode.insertBefore（copiedItem，item）；
}
//收听文档上的单击：
document.addEventListener（'click'，函数（事件）{
//检查是否是单击的按钮：
if（event.target.classList.contains（“btn”））{
console.log（“你好”）；
};
});

创造新的
+
+
+
您只在第一组按钮上设置事件侦听器，而不是克隆的按钮。不要在每个按钮上设置侦听器，而是使用允许事件“冒泡”到一个共同的祖先并在那里处理事件。这样，所有新添加的元素都将立即工作，而不需要自己的处理程序，并且只需要设置一个处理程序，而不需要设置多个处理程序

您还拥有一些冗余代码，当您采用这种方法时，这些代码将不再需要


//无需设置调用真实处理程序的匿名处理程序。只是
//注册真实的一个
document.querySelector（“.add按钮”）.addEventListener（'click'，makecopy）；
const item=document.querySelector（“.container”）；
函数makecopy（）{
让copiedItem=item.cloneNode（true）；
item.parentNode.insertBefore（copiedItem，item）；
}
//收听文档上的单击：
document.addEventListener（'click'，函数（事件）{
//检查是否是单击的按钮：
if（event.target.classList.contains（“btn”））{
console.log（“你好”）；
};
});

创造新的
+
+
+
这一切对我有用吗？您的问题是，当您创建新的时。当您创建新的时，前3个正在打印hello，是的，确切地说，只有当我创建新的并复制原始div时，好的，那么你需要做的是在每个复制上创建另一个事件侦听器？这会让每个按钮都成为他们的听众。这一切对我来说都有效吗？您的问题是，当您创建新的时。当您创建新的时，前3个正在打印hello，是的，确切地说，只有当我创建新的并复制原始div时，好的，那么你需要做的是在每个复制上创建另一个事件侦听器？这将为每个按钮提供侦听器。在这种情况下，copiedItem可能引用的内容比您想要的要多，但这是一个开始，我可能会在每次单击时创建新元素并注册它，然后为方便起见，wards之后的循环很容易部署。谢谢，我只是认为querySelectorAll适用于所有类，甚至是复制的类。任何时候，只要添加更多调用querySelectorAll的元素，就需要再次调用它们来汇总它们。但是，如果您这样做并循环它们，您可能会设置重复的侦听器，这将阻碍您的应用程序。所以，找到一个合适的方法来处理这个问题，对我来说，在每个框的init上创建并设置一个删除点来侦听器。：）在这种情况下，copiedItem可能引用的内容比您想要的要多，但这只是一个开始，我可能会在每次单击时创建新元素并注册它，这样很容易，wards之后的循环很容易部署