WooCommerce商店分页后JS初始化函数不执行，如何解决？

问题根源 #

当前WooCommerce商店分页采用无刷新AJAX加载，页面不会重新加载，因此DOMContentLoaded事件仅在首次页面加载时触发，分页切换或浏览器前进后退时不会再次触发，导致initMyPlugin仅执行一次。

步骤1：修复PHP代码语法错误 #

你的wp_enqueue_script调用存在括号闭合错误，会导致JS文件无法正确加载，修正后代码如下：

add_action('wp_enqueue_scripts', 'map_woo_enqueue_scripts');

function map_woo_enqueue_scripts() {
    // 修复plugins_url括号错误，添加jQuery依赖并设置页脚加载
    wp_enqueue_script('map_woo', plugins_url('/source/js/foo.js', __FILE__), array('jquery'), '', true);
}

步骤2：修改JavaScript代码，监听分页更新事件 #

通过监听WooCommerce自定义事件和浏览器历史事件，确保initMyPlugin在每次页面内容更新时执行：

// 定义可复用的初始化函数
function initMyPlugin() {
    // 这里编写你的业务逻辑，例如操作.foo元素
    console.log('执行插件初始化逻辑');
}

// 首次页面加载时执行初始化
if (!/loaded|interactive|complete/.test(document.readyState)) {
    document.addEventListener("DOMContentLoaded", initMyPlugin);
} else {
    initMyPlugin();
}

// 监听WooCommerce AJAX分页/内容更新事件
document.addEventListener('updated_wc_div', function() {
    initMyPlugin();
});

// 处理浏览器前进后退操作
window.addEventListener('popstate', function() {
    // 延迟执行确保页面内容已更新
    setTimeout(initMyPlugin, 100);
});

关键说明 #

• updated_wc_div是WooCommerce官方定义的自定义事件，会在AJAX完成商店内容更新（包括分页、筛选、排序）后触发，完美适配分页切换场景。
• popstate事件用于处理浏览器前进后退操作，延迟执行是为了确保DOM内容已完全渲染。

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