jQuery submit函数在AJAX调用后无法工作的问题排查与解决

先梳理下你的场景：点击登录按钮后通过AJAX做前置验证，验证通过后调用$('#form').submit()提交表单，但这个提交操作没生效。结合你的代码和常见的jQuery表单提交坑点，主要有几个可能的原因和对应的解决办法：

最常见的问题：jQuery的submit()触发了绑定的阻止事件 #

jQuery的submit()方法和原生DOM的submit()有个关键区别：jQuery的方法会触发所有绑定在表单上的submit事件处理器。如果你的代码里（或者其他引入的脚本）给表单绑定了类似下面的阻止默认行为的逻辑：

$('#form').submit(function(evt) {
  evt.preventDefault();
  // 或者 return false;
});

那当你调用$('#form').submit()时，这个事件处理器会被触发，直接阻止了表单的提交。

解决办法：使用原生DOM的submit方法 #

跳过jQuery的事件触发逻辑，直接调用表单原生的submit方法，这样就不会触发绑定的submit事件处理器，直接提交表单：

// 方式1：通过索引获取原生元素
$('#form')[0].submit();
// 方式2：用get()方法获取原生元素
$('#form').get(0).submit();

其他需要排查的方向 #

• 确认表单选择器是否正确
  先在浏览器控制台执行console.log($('#form'))，看看返回的jQuery对象长度是否为1。如果是0，说明你的表单id不是form，需要修正选择器。
• 检查表单内是否有name为submit的元素
  如果表单里有<input name="submit">或者类似name为submit的元素，会覆盖表单原生的submit()方法，导致无法调用。这种情况需要修改这个元素的name属性。
• 验证AJAX返回的条件是否真的满足
  你的判断条件是data.email==1 && data.password==1 && data.verify==1，可以在这个分支里加个console.log('触发提交')，确认代码真的走到了这一步。如果没走到，说明后端返回的data字段和你的判断不匹配，比如后端返回的是data.pass而不是data.password，需要核对后端返回的JSON结构。

修改后的代码示例 #

把原来的$('#form').submit();替换成原生方法即可：

else if(data.email==1 && data.password==1 && data.verify==1){
    $em.html('');
    $em.css('display', 'none');
    $pass.html('');
    $pass.css('display', 'none');
    // 改用原生submit方法提交表单
    $('#form')[0].submit(); 
}

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