如何在循环中结合document使用addEventListener处理动态元素点击事件

云原生阿岚

2026-8-22

解决动态创建的Accordion元素点击事件不触发问题

你的问题根源在于：初始代码仅在页面加载完成时，给当时已存在的.accordion元素绑定了点击事件，动态创建的元素是后续生成的，自然没被绑定到事件。你尝试的document.acc[i]写法完全错误，因为document对象不存在acc这个属性，acc是你自己定义的局部变量，这么写根本找不到目标元素。

正确的解决方案是使用事件委托：把点击事件绑定到document（或者更接近动态元素的父容器，性能更优），利用事件冒泡机制监听所有点击行为，再判断点击目标是否属于.accordion元素。这样不管元素是初始就存在还是后续动态创建的，都能正常触发点击逻辑。

修改后的代码：

$(document).ready(function () {
    // 事件委托：绑定到document上监听点击
    document.addEventListener('click', function(e) {
        // 找到点击目标及其祖先中最近的.accordion元素
        const targetAccordion = e.target.closest('.accordion');
        if (targetAccordion) {
            // 执行折叠逻辑
            targetAccordion.classList.toggle("active");
            const panel = targetAccordion.nextElementSibling;
            panel.style.display = panel.style.display === "block" ? "none" : "block";
        }
    });
});