购物车抽屉Ajax调用后折叠器功能失效，该如何修复？

云原生阿岚

2026-10-4

失效原因

原有代码仅在页面首次加载时，给当时已存在的折叠按钮绑定了点击事件。Ajax刷新购物车抽屉内容后，新插入的DOM元素没有绑定对应的点击事件，因此无法触发折叠逻辑
补充排查：你提供的HTML示例中按钮class为collapsible，但JS选择的是.collapsibletest，请先确认实际项目中两者类名保持一致，避免匹配失败。

修复方案

推荐使用事件委托实现，把事件绑定到不会被Ajax刷新的父级元素上（比如购物车抽屉的根容器，没有的话也可以绑定到document），后续新插入的折叠按钮也能自动触发事件，不需要重复绑定：

// 优先替换为你的购物车抽屉不会被Ajax替换的父容器选择器，性能更好
const stableParent = document.querySelector('.cart-drawer') || document;

stableParent.addEventListener('click', function(e) {
  // 匹配点击的折叠按钮，类名请和你实际使用的保持一致
  if (e.target.classList.contains('collapsibletest')) {
    e.target.classList.toggle("activetest");
    const content = e.target.nextElementSibling;
    content.style.display = content.style.display === "block" ? "none" : "block";
  }
});