Wordpress小工具表单添加Repeater Fields点击无响应问题求助

核心失效原因 #

旧插件的jQuery交互逻辑是针对早期经典小工具版本开发，和新版WordPress（5.8+）的默认环境不兼容，主要集中在3点：

• WordPress默认启用jQuery noConflict模式，直接用$调用会报错
• 旧代码直接绑定元素点击事件，未适配小工具动态渲染的DOM结构
• 5.8+版本默认启用块式小工具编辑器，旧插件的DOM选择器完全不匹配新编辑器的结构

分步解决思路 #

• 先做兼容性预校验：在主题functions.php中添加以下代码，切回经典小工具模式测试按钮是否恢复响应，可先排除块编辑器兼容问题

  add_filter( 'use_widgets_block_editor', '__return_false' );
  

• 修正jQuery事件绑定逻辑：将原有直接绑定点击事件的写法改为事件委托模式，同时适配jQuery noConflict规则，示例写法如下：

  // 确保DOM加载完成且$符可用
  jQuery(document).ready(function($) {
    // 事件委托绑定到document，适配动态生成的Add row按钮
    $(document).on('click', '.add-row', function(e) {
      e.preventDefault();
      // 原有添加重复行的业务逻辑放在此处即可
    });
  });
  

• 调整脚本加载规则：注册自定义JS资源时必须指定jQuery为依赖项，确保脚本在jQuery加载完成后执行，示例挂载代码如下，放在主题functions.php中：

  add_action( 'admin_enqueue_scripts', 'enqueue_repeater_widget_script' );
  function enqueue_repeater_widget_script() {
    wp_enqueue_script( 
      'custom-repeater-widget',
      get_template_directory_uri() . '/assets/js/repeater-widget.js',
      array( 'jquery' ), // 指定依赖jQuery
      '1.0.0',
      true // 脚本加载到页脚，避免阻塞DOM渲染
    );
  }
  

• 调整重复字段命名规则：所有重复字段的name属性必须添加数组标识符[]，同时遵循WordPress小工具的字段命名规范，示例写法如下：

  <input 
    type="text" 
    name="<?php echo $this->get_field_name( 'social_link' ) ?>[]" 
    value="<?php echo esc_attr( $link ) ?>"
  >
  

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