WordPress购物车AJAX更新后$ is not a function错误解决方法

你的问题核心是WordPress默认启用了jQuery的noConflict模式，这意味着$不会自动关联到jQuery对象，同时你的代码里还有两个容易忽略的参数错误：

1. 在updated_cart_totals事件的回调里，你把参数命名为$，但这个参数其实是事件对象（event），不是jQuery的别名，所以传递给QtyChng的是事件对象，导致里面调用$('.xxx')时出现$ is not a function错误。
2. 点击事件的回调参数也用了$，同样会覆盖掉我们传入的jQuery别名，这里的$也是事件对象。

下面给你两种可行的解决方案：

方案一：显式传递jQuery别名并修正参数名 #

这种方式适合保留你现有函数结构的场景，只需要修正事件绑定的参数问题：

// 文档就绪时，利用jQuery的ready回调自动注入$别名
jQuery(document).ready(function($){ 
  QtyChng($); 
});

// 购物车更新事件：回调参数是事件对象，我们直接传递jQuery给QtyChng
jQuery( document.body ).on( 'updated_cart_totals', function() {
  QtyChng(jQuery);
});

function QtyChng($) {
    // 点击事件的回调参数改为e（代表event），避免和jQuery的$混淆
    $('.woocommerce form.cart, .woocommerce td.product-quantity').on( 'click', '.test-button', function(e) {
        alert("test");
        // 如果需要操作事件，比如阻止默认行为，用e.preventDefault()即可
    });
}

方案二：用立即执行函数(IIFE)封装代码（更推荐） #

这种方式能让你在整个代码块里直接使用$作为jQuery别名，代码更简洁，也避免了参数传递的麻烦：

(function($) {
    // 文档就绪时初始化
    $(document).ready(function(){ 
      QtyChng(); 
    });

    // 购物车更新后重新初始化
    $( document.body ).on( 'updated_cart_totals', function() {
      QtyChng();
    });

    function QtyChng() {
        $('.woocommerce form.cart, .woocommerce td.product-quantity').on( 'click', '.test-button', function(e) {
            alert("test");
        });
    }
})(jQuery);

额外说明 #

WordPress开启noConflict模式是为了避免jQuery和其他JavaScript库（比如Prototype、MooTools）的$变量冲突，所以我们必须通过上述方式显式声明$代表jQuery，而不能直接使用$()。

内容的提问来源于stack exchange，提问作者Ryszard Jędraszyk