WooCommerce Bookings：自定义增减按钮后如何触发AJAX重新计算

你的问题出在两点：

• 自定义按钮默认是submit类型，点击会触发表单提交，干扰正常逻辑
• 用stepUp()/stepDown()修改输入框值后，没有触发WooCommerce Bookings监听的change事件，系统不知道数值已变更，所以不会执行AJAX重新计算

直接修改你的模板代码，做以下调整：

<p class="form-field form-field-wide <?php echo esc_attr( implode( ' ', $class ) ); ?>">
  <label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?>:</label>

  <!-- 自定义减号按钮：添加type="button"，修改点击逻辑 -->
  <button type="button" onclick="document.getElementById('<?php echo esc_attr( $name ); ?>').stepDown(); document.getElementById('<?php echo esc_attr( $name ); ?>').dispatchEvent(new Event('change'));" class="minus">-</button>

  <input type="number" value="<?php echo ( ! empty( $min ) ) ? esc_attr( $min ) : 0; ?>"
    step="<?php echo ( isset( $step ) ) ? esc_attr( $step ) : ''; ?>"
    min="<?php echo ( isset( $min ) ) ? esc_attr( $min ) : ''; ?>"
    max="<?php echo ( isset( $max ) ) ? esc_attr( $max ) : ''; ?>" name="<?php echo esc_attr( $name ); ?>"
    id="<?php echo esc_attr( $name ); ?>" /> <?php echo ( ! empty( $after ) ) ? esc_html( $after ) : ''; ?>

  <!-- 自定义加号按钮：添加type="button"，修改点击逻辑 -->
  <button type="button" onclick="document.getElementById('<?php echo esc_attr( $name ); ?>').stepUp(); document.getElementById('<?php echo esc_attr( $name ); ?>').dispatchEvent(new Event('change'));" class="plus">+</button>
</p>

关键修改点说明：

• 给两个按钮都加上type="button"：阻止按钮默认的表单提交行为，避免页面刷新或表单跳转
• 在stepUp()/stepDown()之后，调用dispatchEvent(new Event('change'))：手动触发输入框的change事件，让WooCommerce Bookings的JS监听器捕捉到数值变化，进而触发AJAX重新计算价格等信息
• 把parentNode.querySelector换成document.getElementById：通过唯一ID选择输入框，比相对选择器更稳定，避免DOM结构变化导致选择失败

如果想让代码更整洁，也可以把JS逻辑抽出来，不用内联onclick：

<p class="form-field form-field-wide <?php echo esc_attr( implode( ' ', $class ) ); ?>">
  <label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?>:</label>

  <button type="button" class="qty-minus" data-input-id="<?php echo esc_attr( $name ); ?>">-</button>

  <input type="number" value="<?php echo ( ! empty( $min ) ) ? esc_attr( $min ) : 0; ?>"
    step="<?php echo ( isset( $step ) ) ? esc_attr( $step ) : ''; ?>"
    min="<?php echo ( isset( $min ) ) ? esc_attr( $min ) : ''; ?>"
    max="<?php echo ( isset( $max ) ) ? esc_attr( $max ) : ''; ?>" name="<?php echo esc_attr( $name ); ?>"
    id="<?php echo esc_attr( $name ); ?>" /> <?php echo ( ! empty( $after ) ) ? esc_html( $after ) : ''; ?>

  <button type="button" class="qty-plus" data-input-id="<?php echo esc_attr( $name ); ?>">+</button>
</p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 减号按钮逻辑
  document.querySelectorAll('.qty-minus').forEach(btn => {
    btn.addEventListener('click', function() {
      const input = document.getElementById(this.dataset.inputId);
      input.stepDown();
      input.dispatchEvent(new Event('change'));
    });
  });

  // 加号按钮逻辑
  document.querySelectorAll('.qty-plus').forEach(btn => {
    btn.addEventListener('click', function() {
      const input = document.getElementById(this.dataset.inputId);
      input.stepUp();
      input.dispatchEvent(new Event('change'));
    });
  });
});
</script>

这种方式把JS和HTML分离，更易维护，也符合现代前端规范。

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