jQuery中preventDefault后如何重新提交表单？

你的问题出在调用了错误的方法来提交表单，按钮元素没有submit()方法，且直接触发click会再次进入你绑定的Ajax逻辑，以下是两种可行的解决方案：

方案1：直接提交所属表单（无需区分提交按钮） #

如果后端不需要判断是哪个按钮触发的提交，直接找到按钮所在的表单并调用表单的submit()方法即可：

修改你的Ajax成功回调中的else分支：

else {
  // 找到当前按钮所属的表单并提交
  $(this).closest('form').submit();
}

方案2：模拟原生按钮提交（需传递submit按钮参数） #

如果后端需要通过submit=Add这个参数判断操作类型（因为你两个提交按钮的name都是submit），可以通过解绑事件后触发原生点击来绕过jQuery绑定的Ajax逻辑：

修改else分支代码：

else {
  // 解绑body上绑定的.add按钮点击事件
  $('body').off('click', '.add');
  // 触发按钮的原生点击事件，执行默认表单提交
  $(this).trigger('click');
}

为什么你之前的方法无效 #

• $('input[type="submit"]').submit() & $('.add').submit()：submit()是表单元素的专属方法，提交按钮没有这个方法，调用后不会产生任何提交行为。
• $('.add').trigger()：trigger()必须指定要触发的事件名（比如trigger('click')），但即使补充了事件名，也会再次触发你绑定的Ajax逻辑，而非默认的表单提交行为。

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