如何在Woocommerce结账页面AJAX调用后执行jQuery脚本

DevOps 小满

2026-7-26

解决WooCommerce结账页AJAX更新后脚本不生效的问题

问题分析

你的原脚本仅在DOM首次加载时执行一次，但WooCommerce结账页的订单复核区域会通过AJAX动态更新（比如用户修改地址、切换商品变体后），更新后的新DOM元素不会触发原脚本，导致逻辑失效。

解决方案

WooCommerce提供了专门的updated_checkout事件，会在结账页AJAX请求完成并更新DOM后触发。我们可以将逻辑绑定到这个事件上，同时保留DOM初始加载时的执行，确保首次加载和后续AJAX更新都能生效。

另外需要修正原脚本的判断逻辑：$(".variation-Livraison p:contains(A domicile)")返回的jQuery对象始终为真值，应该用.length > 0来判断目标元素是否存在。

修改后的完整代码

var $ = jQuery;

// 封装核心逻辑函数
function handleShippingMethod() {
  // 正确判断目标元素是否存在
  if ($(".variation-Livraison p:contains('A domicile')").length > 0) {
    $("#shipping_method").addClass('disable');
  } else {
    // 可选：条件不满足时移除类，避免状态残留
    $("#shipping_method").removeClass('disable');
  }
}

// DOM首次加载时执行
$(document).ready(function () {
  handleShippingMethod();
});

// 监听结账页AJAX更新事件，完成后执行逻辑
$(document.body).on('updated_checkout', function () {
  handleShippingMethod();
});