WordPress/WooCommerce插件开发：自定义表单字段无法绑定jQuery事件

问题原因分析 #

1. PHP代码引号错误：你提供的PHP代码中，woocommerce_form_field的第一个参数'fidelity_code’使用了中文单引号（右侧引号为中文格式），这会导致WooCommerce生成的input字段id并非预期的fidelity_code，而是包含非法字符的错误值，直接导致jQuery无法选中目标元素。
2. 动态元素绑定限制：WooCommerce结账页部分区域会动态刷新（比如切换配送方式、更新订单金额时），自定义字段可能在document.ready之后才被渲染，直接绑定元素事件会因元素未加载而失效。

解决方案 #

步骤1：修复PHP代码的语法错误 #

将代码中的中文引号、中文破折号替换为英文格式，确保字段id和文本域标识正确：

woocommerce_form_field(
  'fidelity_code', // 替换为英文单引号
  array(
      'type' => 'text',
      'label' => __('Fidelity code', 'my-plugin-woo'), // 中文破折号替换为英文破折号
      'class' => array('form-row', 'form-row-wide'),
      'id' => 'fidelity_code',
      'required' => false,
  )
);

步骤2：使用事件委托绑定动态元素 #

通过事件委托将事件绑定到已存在的父级静态元素（如结账表单form.checkout），确保动态生成的字段能触发事件：

jQuery(document).ready(function ($) {
  // 事件委托：绑定到结账表单，监听fidelity_code字段的change事件
  $('form.checkout').on('change', '#fidelity_code', function () {
    console.log("It's work");
    // 在此添加会员码校验逻辑
  });
});

额外排查建议 #

• 打开浏览器开发者工具（F12），在Elements面板确认fidelity_code字段的id是否正确，无拼写或非法字符。
• 查看Console面板是否有JavaScript报错，快速定位元素不存在或语法错误问题。

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