WordPress站点AJAX调用后如何重新初始化Swiper轮播

jQuery(document).ready事件仅在页面首次全量加载完成时触发一次。AJAX局部刷新替换列表DOM后，新渲染的轮播节点没有绑定Swiper实例，原先绑定在被删除旧节点上的Swiper实例也随DOM移除一同销毁，即使配置了observer: true也无法作用于未初始化的新DOM节点，最终导致轮播失效。
另外原初始化代码存在多实例冲突隐患：全局选择导航、分页按钮类名时，页面存在多个轮播的场景下会出现控件错绑问题。

• 将Swiper初始化逻辑封装为可重复调用的独立函数，初始化前过滤已经绑定过实例的节点，避免重复初始化造成内存泄漏
• 页面首次加载完成时调用一次初始化函数，保证初始渲染的轮播正常运行
• 监听AJAX请求完成事件，每次局部刷新渲染新内容后，自动给新生成的轮播节点绑定Swiper实例

// 封装可复用的Swiper初始化逻辑
function initSwiperCarousels() {
  // 仅遍历未初始化的Swiper容器
  document.querySelectorAll('.swiper:not(.swiper-initialized)').forEach(function(swiperEl) {
    new Swiper(swiperEl, {
      direction: 'horizontal',
      effect: 'slide',
      speed: 150,
      loop: true,
      observer: true,
      observeParents: true, // 开启父节点变动监听，提升DOM变动时的兼容性
      // 仅在当前轮播容器内查找控件，解决多轮播控件冲突问题
      navigation: {
        nextEl: swiperEl.querySelector('.swiper-button-next'),
        prevEl: swiperEl.querySelector('.swiper-button-prev'),
      },
      pagination: {
        el: swiperEl.querySelector('.swiper-pagination'),
      },
    });
  });
}

// 页面首次加载完成后初始化轮播
jQuery(document).ready(function() {
  initSwiperCarousels();
});

// 监听全站AJAX请求完成事件，局部刷新后重新初始化新增的轮播
jQuery(document).on('ajaxComplete', function() {
  initSwiperCarousels();
});

提示：如果你的站点筛选功能用了自定义的JS渲染逻辑、没有触发WordPress原生的AJAX完成钩子，可以把initSwiperCarousels()调用直接加在你自己写的AJAX成功回调、DOM渲染完成的位置即可，效果一致。

内容的提问来源于stack exchange，提问作者Gabriele Cettolin