筛选文章归档时jQuery脚本失效，寻求Ajax触发时重载脚本方案

问题根源 #

页面加载时绑定的slick滑块afterChange事件，只对当时存在的DOM元素生效。Ajax筛选归档后，新生成的文章滑块没有被绑定事件，导致脚本失效；直接把脚本放进文章主体会重复绑定，影响其他文章的滑块逻辑。

解决方案 #

把事件绑定逻辑封装成独立函数，在页面初始化和Ajax请求完成后重新执行，同时避免重复绑定：

1. 封装绑定逻辑为独立函数

function initSliderTitleToggle() {
    // 先解绑已有事件，防止重复绑定导致多次触发
    $('.grid-item-cont .slick-slider').off('afterChange');
    
    $('.grid-item-cont').each(function() {
        var $post = $(this);
        var $slickSlider = $post.find('.slick-slider');
        var $sliderTitle = $post.find('.slider-title');

        $slickSlider.on('afterChange', function(event, slick, currentSlide) {
            $sliderTitle.toggleClass('overlay-slider', currentSlide !== 0);
        });
    });
}

这里用toggleClass简化了原逻辑，效果和之前完全一致。

2. 初始化+Ajax完成时调用函数

jQuery(document).ready(function($) {
    // 页面首次加载时初始化
    initSliderTitleToggle();

    // 监听全局Ajax完成事件，适配大部分WordPress筛选插件
    $(document).ajaxComplete(function() {
        // 短延迟确保新DOM已渲染完成
        setTimeout(initSliderTitleToggle, 100);
    });

    // 如果全局Ajax监听不生效，可替换为筛选按钮的点击事件（示例）
    // $('.archive-filter-btn').on('click', function() {
    //     setTimeout(initSliderTitleToggle, 300);
    // });
});

关键说明 #

• ajaxComplete会在所有Ajax请求结束后触发，若需仅针对筛选请求，可通过ajaxComplete的xhr参数判断请求URL
• 延迟时间可根据页面加载速度调整，确保新的.grid-item-cont元素已生成
• off('afterChange')用于清除旧绑定，避免同一滑块多次触发事件

内容的提问来源于stack exchange，提问作者Aj G