WordPress FAQ页面AJAX加载后jQuery交互与样式不生效问题

问题根源 #

你当前的折叠交互事件是直接绑定在页面初始加载时已存在的.accordion-list > li元素上的，AJAX请求完成后替换了.faq-ajax-wrapper内的所有内容，新插入的li元素没有经过事件绑定，自然不会触发折叠逻辑。

最优解决方案：使用事件委托 #

事件委托是把事件绑定到不会被AJAX替换的父级元素上，利用事件冒泡机制触发匹配子元素的交互逻辑，不需要反复绑定事件，性能更稳定。
修改步骤如下：

1. 首先建议把折叠面板的默认隐藏逻辑写到CSS里，避免每次加载内容都要执行JS隐藏：

.accordion-list > li > .answer {
  display: none;
}

2. 改造原有的JS交互代码，把直接绑定改为事件委托：

jQuery(document).ready(function(){
  // 如果你不想加CSS，这行hide()保留也可以，后续AJAX成功后再调用一次就行
  // jQuery('.accordion-list > li > .answer').hide();

  // 把事件绑定到不会被替换的父级.faq-ajax-wrapper上，也可以绑定到document
  jQuery('.faq-ajax-wrapper').on('click', '.accordion-list > li', function() {
    if (jQuery(this).hasClass("active")) {
      jQuery(this).removeClass("active").find(".answer").slideUp();
    } else {
      jQuery(".accordion-list > li.active .answer").slideUp();
      jQuery(".accordion-list > li.active").removeClass("active");
      jQuery(this).addClass("active").find(".answer").slideDown();
    }
  });
});

3. 如果你没有加CSS，还需要在AJAX的success回调中，替换完HTML后执行一次隐藏逻辑：
   找到AJAX部分的success代码，修改为：

success : function( faqdata ) {
  $('.faq-loader').css( 'display', 'none' );
  if ( faqdata ) {
    $('.faq-ajax-wrapper').html( faqdata.faqposts );
    // 新增：隐藏新加载的回答内容
    jQuery('.accordion-list > li > .answer').hide();
  } else {
    $('.faq-ajax-wrapper').html( 'No posts found.' );
  }
}

备选解决方案：封装交互函数，AJAX加载后重新调用 #

你也可以把折叠交互逻辑封装为独立函数，页面初始化和AJAX加载完成后各调用一次：

1. 封装交互函数：

function initFaqAccordion() {
  jQuery('.accordion-list > li > .answer').hide();
  // 先解绑避免重复绑定
  jQuery('.accordion-list > li').off('click').on('click', function() {
    if (jQuery(this).hasClass("active")) {
      jQuery(this).removeClass("active").find(".answer").slideUp();
    } else {
      jQuery(".accordion-list > li.active .answer").slideUp();
      jQuery(".accordion-list > li.active").removeClass("active");
      jQuery(this).addClass("active").find(".answer").slideDown();
    }
  });
}

2. 页面初始化时调用：

jQuery(document).ready(function(){
  initFaqAccordion();
});

3. AJAX成功替换内容后再次调用：

success : function( faqdata ) {
  $('.faq-loader').css( 'display', 'none' );
  if ( faqdata ) {
    $('.faq-ajax-wrapper').html( faqdata.faqposts );
    // 重新初始化折叠交互
    initFaqAccordion();
  } else {
    $('.faq-ajax-wrapper').html( 'No posts found.' );
  }
}

两种方案都可以解决问题，优先推荐事件委托方案，不需要处理重复绑定的问题，维护成本更低。

内容的提问来源于stack exchange，提问作者Mohammad Umar