使用AJAX时如何让JS在WordPress分页后仍生效

The Events Calendar插件的AJAX分页有专属的事件监听机制，比全局ajaxComplete更精准，推荐用下面的方案：

方案一：使用插件原生AJAX成功事件 #

插件在AJAX分页完成后会触发tribe_events_ajax_success事件，直接监听这个事件就能确保分页完成后执行你的DOM操作函数：

jQuery(document).ready(function($) {
    // 页面初始加载时执行一次
    courseElements();

    // 监听插件的AJAX分页成功事件
    $(document).on('tribe_events_ajax_success', function(event, responseData) {
        // 可选：只在网格视图的分页请求后执行，避免其他AJAX请求触发
        if (responseData.view === 'grid') {
            courseElements();
        }
    });
});

方案二：优化全局ajaxComplete监听（如果坚持用全局） #

如果一定要用全局的ajaxComplete，需要过滤掉无关的AJAX请求，同时加短延迟确保DOM已更新：

jQuery(document).ready(function($) {
    courseElements();

    $(document).ajaxComplete(function(event, xhr, settings) {
        // 检查请求是否属于The Events Calendar的分页动作
        if (settings.url.includes('action=tribe_events') || settings.url.includes('action=tribe_list')) {
            // 延迟100ms执行，等待插件渲染完新的网格元素
            setTimeout(() => courseElements(), 100);
        }
    });
});

关键注意事项 #

• 确保courseElements()函数里的DOM选择器是每次执行时重新获取的，不要提前缓存元素（比如不要写const $courses = $('.course-item')放在函数外，要在函数内部重新获取）
• 如果网格有加载动画，可适当调整延迟时间（比如200ms），保证元素完全渲染后再操作

内容的提问来源于stack exchange，提问作者John Paul