1：问题描述

为提高用户使用体验，在购物车页面，自定义了数量增加减按钮。

js脚本如下：

$('.quantity > .quantity-ctrl.add').click(function () {
    //console.log("点击增加");
    // 找到当前点击按钮所在 .quantity 容器内的 input 元素
    let $input = $(this).closest('.quantity').find('input.qty');
    var step = parseFloat($input.attr('step')) || 1; // 读取 step 属性值
    // 获取当前 input 的值，转为数字，若值为空或非有效数字，默认设为 0
    let currentVal = parseInt($input.val(), 10) || 0;
    // 值加 1
    $input.val(currentVal + step);
    $input.change();
    // 手动触发 input 的 change 事件（如果有其他依赖此值变化的逻辑，可通过该事件通知）
    // $input.trigger('change');
});

调试发现：一开始打开页面时，加减按钮正常，但是点击购物车触发更新后，再次操作加减按钮时，则无法操作。

2：原因：动态内容更新导致事件绑定失效

如上，本人代码使用了直接绑定事件的方式：

$('.quantity > .quantity-ctrl.add').click(function () {
    // 事件处理逻辑
});

这种方式在页面初始加载时是有效的，但当页面内容通过 AJAX 动态更新后（比如点击 “Update Cart” 按钮），原来的 DOM 元素会被新的 DOM 元素替换。此时，原来绑定的事件监听器不会自动应用到新的 DOM 元素上，导致按钮失去响应。

而且：WooCommerce 的购物车更新就是通过 AJAX 实现，这意味着当你点击 “Update Cart” 按钮时，页面不会完全刷新，但购物车相关的 DOM 元素会被重新渲染。这正是导致你的事件绑定失效的关键原因。

3：解决：使用事件委托机制

使用事件委托（Event Delegation），它可以将事件绑定到父元素上，即使子元素是动态添加的，事件也能正确触发。

// 使用事件委托，将事件绑定到文档或更上层的静态父元素
$(document).on('click', '.quantity > .quantity-ctrl.add', function () {
    // 事件处理逻辑
});

4：什么是事件委托

事件委托基于 JavaScript 的事件冒泡机制，它的工作原理是：
1：将事件监听器绑定到静态存在的父元素（如document、body或某个固定的容器）
2：当事件在子元素上触发时，事件会冒泡到父元素
3：父元素的事件监听器会检查事件目标是否匹配指定的选择器

通过使用事件委托机制，你可以确保无论页面内容如何动态更新，数量加减按钮的事件绑定都能保持有效，解决点击 “Update Cart” 后按钮失效的问题。