Javascript Onclick类切换不触发

我想为页面上许多不同的可点击元素创建一个简单的类切换

<script>
    const toggleActiveEls = document.querySelectorAll('.toggle-active');

    function toggleActive() {
        this.classList.toggle("active");
    }

    toggleActiveEls.forEach(i => {
        i.addEventListener("click", toggleActive);
    });
</script>

const-togglectiveels=document.querySelectorAll（'.toggle-active'）；
函数toggleActive（）{
this.classList.toggle（“活动”）；
}
toggleactiveeels.forEach（i=>{
i、 addEventListener（“单击”，toggleActive）；
});

我有一个页面正在加载大量的片段。加载它们需要一段时间，一些部分包含应该有事件侦听器的按钮，但我无法使事件侦听器应用于所有部分。（尽管它似乎确实适用于一些人。）

我试着将代码延迟到所有的部分加载，但这似乎不起作用

<script>
    window.addEventListener('load', function () {
        const toggleActiveEls = document.querySelectorAll('.toggle-active');

        function toggleActive() {
            this.classList.toggle("active");
        }

        toggleActiveEls.forEach(i => {
            i.addEventListener("click", toggleActive);
        });
    })
</script>

window.addEventListener（'load'，函数（）{
const-togglectiveels=document.querySelectorAll（'.toggle-active'）；
函数toggleActive（）{
this.classList.toggle（“活动”）；
}
toggleactiveeels.forEach（i=>{
i、 addEventListener（“单击”，toggleActive）；
});
})

---

我对下一步该做什么感到有点困惑。这似乎是一个优雅的解决方案，所以我希望它能被挽救。

我不确定这是否能100%解决您的问题，但一般来说，将事件侦听器附加到许多项目上不是一个好主意。相反，您应该执行事件委派—在父DOM节点上附加一个单击侦听器，并确定您是否正在单击方法中的某个项

注意：

let myList=document.getElementById（'my-list'））
myList.addEventListener（'click'，onClick）
函数onClick（e）{
var clickedItem=e.target
for（设i=0；i

.active{
背景：红色；
}

洛勒姆
Ipsum
多拉
坐着
艾米特
艾琳
罗布苏姆

我认为

document.addEventListener（'DOMContentLoaded'，function（）{}）

更适合您的情况。感谢您提供的有关不要添加大量事件侦听器的提示。将其附加到父级时，是否需要是直接父级？我只想将其附加到一个DIV，而不是为每个父级使用一个函数。只是更新了我的答案。提供了一个更小的更新，以使事情更清楚谢谢！我将对此进行测试，如果它回答了最初的问题，我将予以回复。不管怎样，看到这种逻辑对我个人非常有帮助，所以谢谢。我有一个我怀疑是非常愚蠢的问题，答案很广泛，但这里是这样的：你说“没有什么可以阻止你在最外层的元素（document.body）上附加一个侦听器…”尽管如此，这是不现实的，“为什么这样做不现实？”？