WordPress Woo表单jQuery onChange事件仅运行一次 如何让其每次触发都执行

核心调整说明 #

• 绑定事件前先解绑同类型事件，避免多回调冲突导致执行异常
• 修复代码中被转义的引号字符，保证选择器正常识别
• 优化字段取值逻辑，直接从触发事件的目标元素取值，减少DOM查询
• 补充空值处理逻辑，避免切换选项后旧字段值残留
• 可选适配WooCommerce结算页异步刷新逻辑，避免填充后的内容被重置

修复后完整代码 #

jQuery(document).ready(function() {
  // 先解绑已存在的同事件，避免重复绑定冲突
  jQuery(document).off('change', '#billing_complex_name').on('change', '#billing_complex_name', function(e) {
    // 若WooCommerce默认更新行为干扰填充，可取消下面两行的注释
    // e.preventDefault();
    // e.stopImmediatePropagation();
    myFunc(jQuery(this).val());
  })

  function myFunc(complex_name) {
    if (complex_name == 'eldogleneast') {
      jQuery("#billing_suburb").val('ELD');
      jQuery('#billing_postcode').val('0157');
      jQuery("#billing_complex_address").val('');
    } else if (complex_name == 'Reldoglen') {
      jQuery("#billing_suburb").val('LPN');
      jQuery('#billing_postcode').val('0133');
      jQuery("#billing_complex_address").val('');
    } else if (complex_name == 'eldin') {
      jQuery("#billing_suburb").val('STK');
      jQuery('#billing_postcode').val('2147');
      jQuery("#billing_complex_address").val('Lion St');
    } else if (complex_name == 'elm') {
      jQuery("#billing_suburb").val('ELD');
      jQuery('#billing_postcode').val('0147');
      jQuery("#billing_complex_address").val('Lor Ave');
    } else {
      // 未匹配到选项时清空所有关联字段
      jQuery("#billing_suburb, #billing_postcode, #billing_complex_address").val('');
    }
  }

  // 可选：监听WooCommerce结算更新事件，解决异步刷新后填充值丢失问题
  jQuery(document).on('updated_checkout', function() {
    const currentComplex = jQuery('#billing_complex_name').val();
    if(currentComplex) myFunc(currentComplex);
  })
})

注意事项 #

• 注册脚本时请将woocommerce-checkout设为依赖项，保证你的脚本晚于WooCommerce核心结算脚本加载
• 若调整后仍有触发异常，可检查页面是否存在重复ID的#billing_complex_name元素

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