WordPress插件中jQuery表单提交失效问题求助

嘿，我一眼就看到了一个关键错误，这大概率是导致你的代码完全不执行的原因！咱们一步步来解决：

1. 先修复Script标签的致命错误 #

你把自定义的jQuery代码写在了带有src属性的script标签里面——这是浏览器的规则：带有src的script标签只会加载外部资源，内部的代码会被直接忽略！所以你的提交事件绑定、alert这些代码根本没被执行，自然阻止不了表单的默认跳转，也不会有任何响应。

正确的写法应该是分开两个script标签： #

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

<!-- 再写自定义的JS代码 -->
<script>
jQuery(document).ready(function($){
    $('#form').submit(function(e){
        e.preventDefault();
        alert('hello');
        var data = $(this).serialize();
        $.ajax({
            url: 'http://localhost:8888/wp-json/v1/contact_form/submit',
            type: 'POST',
            data: data,
            success: function(response){
                console.log(response);
            }
        });
    });
});
</script>

2. WordPress环境下的额外注意事项 #

即使修复了上面的问题，在WordPress里还有几个常见的坑要排查：

• 别硬编码AJAX地址：WordPress有内置的全局变量，比如REST API的路由最好通过WordPress的函数生成，避免硬写localhost（部署到线上后会失效）。如果是自定义REST路由，要确保你已经通过register_rest_route正确注册了这个接口，并且设置了合适的权限（比如允许未登录用户访问）。
• 避免jQuery版本冲突：WordPress默认自带了jQuery，而且是处于noConflict模式的。如果你自己引入外部的jQuery版本，可能会和自带的冲突。建议通过wp_enqueue_script来加载脚本，让WordPress管理依赖，而不是手动写script标签。
• 检查控制台错误：按F12打开开发者工具，切换到Console标签，看看有没有报错——比如jQuery未定义、表单选择器找不到元素、AJAX请求404等，这些错误会直接告诉你下一步该修哪里。
• 确保表单ID唯一：页面上只能有一个id="form"的表单，不然jQuery可能绑定到错误的元素，或者根本没绑定到你目标的表单上。
• 动态表单要用事件委托：如果你的表单是通过AJAX动态加载到页面的（比如在弹窗里），那直接用$('#form').submit()绑定事件会失效，需要改成事件委托：

  jQuery(document).ready(function($){
      $(document).on('submit', '#form', function(e){
          e.preventDefault();
          // 剩下的代码不变
      });
  });
  

3. 测试步骤 #

修复后先做简单测试：点击提交按钮，如果alert弹出来了，说明事件绑定成功了，接下来再排查AJAX请求的问题（比如接口是否存在、参数是否正确）。如果alert还是不弹，那先在Console里输入jQuery，看是否返回函数——如果返回undefined，说明jQuery没加载成功，得先解决这个问题。

内容的提问来源于stack exchange，提问作者kan niet anders