如何用jQuery监听购物车小计的DOM文本变化？

针对你在tecnosport.es网站遇到的购物车小计监听失效问题，以下是具体的解决方案：

核心问题分析 #

你遇到的绑定无效，大概率是两个原因：

1. 绑定事件时目标元素还未被动态渲染到DOM中（购物车是点击后才加载的）
2. DOMSubtreeModified事件已被废弃，部分浏览器对其支持不稳定

可行方案 #

方案1：使用MutationObserver（推荐，替代废弃的DOMSubtreeModified） #

这是目前监听DOM内容变化的标准方式，兼容性和稳定性更好。

jQuery(document).ready(function() {
    // 监听购物车按钮点击，确保购物车区域加载完成
    jQuery(".elementor-menu-cart__toggle").on("click", function() {
        // 延迟等待购物车DOM渲染完成
        setTimeout(() => {
            // 获取所有目标小计元素
            const subtotalElements = jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi");
            
            // 为每个元素创建观察者
            subtotalElements.each(function(index) {
                const targetEl = this;
                // 初始化保存当前值，用于对比变化
                let lastValue = jQuery(targetEl).text();
                
                const observer = new MutationObserver((mutations) => {
                    const currentValue = jQuery(targetEl).text();
                    // 只有值确实变化时才执行操作
                    if (currentValue !== lastValue) {
                        console.log(`第${index+1}个购物车小计更新：`, currentValue);
                        // 这里替换成你需要执行的操作
                        lastValue = currentValue;
                    }
                });
                
                // 配置观察选项：监听文本内容变化
                observer.observe(targetEl, {
                    characterData: true,
                    childList: true,
                    subtree: true
                });
            });
        }, 600); // 可根据实际加载速度调整延迟时间
    });
});

方案2：修正DOMSubtreeModified的绑定方式 #

如果你坚持使用该事件，需要确保元素存在后再绑定：

jQuery(document).ready(function() {
    // 轮询检查元素是否存在
    const checkInterval = setInterval(() => {
        const subtotalElements = jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi");
        if (subtotalElements.length > 0) {
            clearInterval(checkInterval);
            // 循环绑定事件到每个元素
            subtotalElements.each(function() {
                jQuery(this).on("DOMSubtreeModified", function() {
                    console.log("小计变化：", jQuery(this).text());
                    // 执行你的操作
                });
            });
        }
    }, 500);
});

关键注意事项 #

• 购物车是动态生成的组件，必须等待其渲染完成后再绑定监听，否则无法找到目标元素
• 优先使用MutationObserver，DOMSubtreeModified已被W3C标记为废弃，后续浏览器可能移除支持
• 如果需要监听商品添加到购物车的动作，也可以直接监听WooCommerce的added_to_cart事件：

  jQuery(document).on("added_to_cart", function() {
      // 商品添加到购物车后执行操作，比如重新获取小计值
      const subtotals = jQuery(".elementor-menu-cart__subtotal > .woocommerce-Price-amount > bdi").map(function() {
          return jQuery(this).text();
      }).get();
      console.log("商品添加后小计：", subtotals);
  });
  

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