JQuery商品数量加减功能异常：切换规格后增量变为+2

切换商品规格/颜色后点击+按钮数值加2，本质是事件重复绑定：每次切换规格时，你都会执行这段绑定代码，给#partQuantity元素添加新的点击事件监听。当新的按钮被点击时，多个事件处理函数同时触发，导致数值被累加多次。另外，代码中依赖循环变量data[k]，存在闭包引用问题，可能导致操作的不是当前规格对应的输入框。

1. 重构DOM结构（添加类和数据属性） #

给加减按钮和输入框添加统一类名，并用data-*属性存储规格相关标识和库存上限，示例结构：

<div class="quantity-group">
  <button type="button" class="minus-btn">-</button>
  <input type="number" class="quantity-input" value="1" data-onhand="10" id="quaXXX">
  <button type="button" class="plus-btn">+</button>
</div>

2. 优化事件绑定（仅绑定一次，避免重复） #

使用类选择器做事件委托，不再依赖动态ID，同时从DOM元素的data-*属性获取参数，规避闭包问题：

// 先移除旧监听防止重复绑定，再统一绑定事件
$('#partQuantity').off('click', '.plus-btn .minus-btn').on('click', '.plus-btn, .minus-btn', function(event) {
  event.preventDefault();
  // 找到当前按钮所属组的输入框
  const $input = $(this).closest('.quantity-group').find('.quantity-input');
  if (!$input.length) return;

  const currentValue = parseInt($input.val()) || 1;
  const maxStock = parseInt($input.data('onhand')) || Infinity;

  if ($(this).hasClass('plus-btn')) {
    currentValue < maxStock && $input.val(currentValue + 1);
  } else if ($(this).hasClass('minus-btn')) {
    currentValue > 1 && $input.val(currentValue - 1);
  }
});

3. 切换规格时的注意事项 #

切换商品规格后，只需要更新输入框的value和data-onhand属性即可，不需要重新执行事件绑定代码——因为事件委托绑定在父元素#partQuantity上，新渲染的按钮会自动触发事件。

• 用类选择器+事件委托替代动态ID绑定，彻底避免重复绑定问题。
• 通过data-*属性传递规格参数，摆脱对循环变量的依赖，解决闭包导致的变量引用错误。
• 合并加减按钮的事件逻辑，减少冗余代码。

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