为何显示模态框后jQuery的.submit()函数失效且陷入无限循环？

问题根源分析 #

原始代码的无限循环问题 #

你绑定的submit事件处理器里，调用$("#myform").submit()会再次触发同一个submit事件，于是又执行e.preventDefault()阻止提交，接着进入setTimeout，之后又调用submit，无限循环往复，永远到不了真正的表单提交环节。

修改后无法提交的问题 #

你修改后的代码中，return false;写在了$("#myform").submit();之前——函数执行到return false就直接终止了，后面的提交代码根本不会被执行。就算把submit代码移到return前面，还是会回到无限循环的老问题。

正确解决方案 #

方案一：调用原生DOM的submit方法（推荐） #

直接使用原生表单元素的submit方法，它不会触发jQuery绑定的submit事件监听，能直接完成表单提交：

$('#myform').on('submit', function(e) {
  e.preventDefault();
  const formElement = this; // 保存当前表单的原生DOM元素
  $('#myModal').modal('show');
  
  setTimeout(function() {
    $('#myModal').modal('hide');
    formElement.submit(); // 调用原生submit，绕过jQuery事件监听，直接提交
  }, 5000);
});

方案二：添加状态标记避免重复触发 #

通过一个布尔标记控制事件处理器的执行，防止循环触发：

let isProcessingSubmit = false;

$('#myform').on('submit', function(e) {
  // 如果正在处理提交流程，直接跳过
  if (isProcessingSubmit) return;
  
  e.preventDefault();
  isProcessingSubmit = true;
  $('#myModal').modal('show');
  
  setTimeout(function() {
    $('#myModal').modal('hide');
    $("#myform").submit(); // 此时标记为true，事件处理器会直接跳过，执行原生提交
  }, 5000);
});

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