如何解决AJAX后重复绑定切换函数导致的功能失效问题？

你的问题根源是重复绑定点击事件：第一次页面加载时调用pageFunctions()给筛选器标题绑定了点击事件，AJAX加载完成后再次调用该函数，又给同一个（甚至新生成的）元素多绑了一次点击事件。这会导致点击一次时toggle执行两次，相当于没切换，看起来功能失效。另外全局数组filterLiOpen在AJAX后会和新元素的索引不匹配，进一步打乱状态判断逻辑。

修复方案：用事件委托替代直接绑定，移除冗余状态变量 #

事件委托的核心是把事件绑定到一直存在的父元素上，不管子元素怎么通过AJAX更新，事件都能生效，还能彻底避免重复绑定问题。同时可以直接用元素的active类判断状态，不需要额外的全局数组。

修改后的代码示例：

1. 重构筛选器切换逻辑（只需初始化一次）

function initFilterToggle() {
  // 把事件绑定到始终存在的父元素.searchandfilter上
  document.querySelector('.searchandfilter').addEventListener('click', function(e) {
    // 只处理点击筛选器标题h4的情况
    if (e.target.matches('ul li h4')) {
      // 找到对应的父li节点
      const filterLi = e.target.closest('[data-sf-meta-type="choice"]');
      if (filterLi) {
        // 直接切换active类，无需额外状态变量
        filterLi.classList.toggle('active');
      }
    }
  });
}

2. 初始化与AJAX回调处理

// 页面加载完成后初始化一次切换逻辑
initFilterToggle();

// AJAX完成后只处理需要重新获取DOM的逻辑（比如货车可用性检查）
(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        checkVanAvailability();
  });
}(jQuery));

// 抽离货车可用性检查逻辑，单独执行
function checkVanAvailability() {
    let singleVan = document.querySelector('.single-vans')
    let numberFilters = document.querySelector('.number-of-filters p')
    let count = 0;
    
    let availability = document.querySelectorAll('.availability')
    let content = document.querySelectorAll('.vans')
    
    // 这里保留原有的可用性检查逻辑...
}

修复逻辑说明 #

• 事件委托通过父元素捕获点击事件，自动适配AJAX生成的新元素，无需重复绑定事件
• 直接用元素自身的active类判断状态，和DOM状态完全同步，避免全局数组的索引混乱问题
• 拆分逻辑后，AJAX回调只执行需要更新的部分（比如重新统计货车可用性），避免重复绑定事件

内容的提问来源于stack exchange，提问作者k-lythgoe