威士忌护照应用中预存div点击事件失效问题求助

我在开发一款威士忌护照应用以提升编码技能时，遇到了一个JavaScript问题：新生成的div元素点击后可以正常切换clicked类样式，但页面中已有的预存div点击完全没有响应。

原问题代码 #

JavaScript代码 #

// 为新生成的div添加点击事件监听器
newDiv.addEventListener("click", function() {
    newDiv.classList.toggle("clicked"); // 切换'clicked'类
});

// 尝试为预存div添加点击事件监听器
var preExistingDivs = savedItemsDiv.getElementsByClassName("savedItemsDiv");
for (var i = 0; i < preExistingDivs.length; i++) {
    preExistingDivs[i].addEventListener("click", function() {
        this.classList.toggle("clicked");
    });
}

CSS代码 #

#saved-items.savedItemsDiv.clicked { background-color: lightpink; }

注：clicked类是临时用于测试的样式，div的其他基础样式（尺寸、字体、光标等）均正常显示。我尝试过二次绑定监听器、为每个预存项单独绑定（需创建400+监听器，不合理）等方法，甚至咨询过AI但陷入循环问题，都没能解决。

解决方案代码 #

通过事件委托的方式，既避免了大量重复绑定监听器的问题，同时让预存和新生成的元素都能正常响应点击：

// 为父容器添加点击事件，通过event.target判断触发元素
for(i = 0; i < savedItemsDivs.length; i++){
  savedItemsDivs[i].addEventListener("click", function(event) {
     if (event.target.classList.contains("savedItemsDiv")) {
        event.target.classList.toggle("clicked");
        console.log("clicked this thang");
     }
  });
}

感谢所有提供建议的人！

内容的提问来源于stack exchange，提问作者Zachary Spooner