为何使用jQuery submit()方法时Firefox未发送表单请求（Chrome正常）

问题场景 #

点击页面中「Generate」按钮时，已通过日志确认jQuery事件处理程序执行，但Ubuntu系统的Firefox 113.0.2浏览器未发送表单请求，而Chrome中请求可正常发送。使用的jQuery版本为1.10.2。

页面HTML代码 #

<form id="sitemap_diff" action="/sitemaps/generate_sitemap_diff" method="get">
  <!-- more HTML elements here -->
  <button class="btn btn-success cls" id="cls" type="submit">Generate</button>
</form>

事件处理代码 #

$('.cls').click(function () {
  $('#sitemap_diff').submit();
  // more code
});

原因解析 #

• 按钮本身是type="submit"，点击时会触发浏览器原生的表单提交行为，同时代码又手动调用了$('#sitemap_diff').submit()，造成两次提交触发的冲突。
• 不同浏览器对这种重复触发的处理逻辑存在差异：Chrome会合并或优先处理其中一次提交，而Firefox 113.0.2在该场景下，由于事件时序或冲突机制，导致表单提交被阻塞。
• jQuery 1.10.2是较旧版本，对现代Firefox的事件处理兼容性存在不足，进一步放大了这个冲突问题。

解决方案 #

方案1：修改按钮类型 #

将按钮的type改为button，避免触发浏览器默认提交行为，只保留代码中的手动提交：

<button class="btn btn-success cls" id="cls" type="button">Generate</button>

方案2：阻止按钮默认行为 #

在click事件处理中添加阻止默认行为的代码，消除冲突：

$('.cls').click(function (e) {
  e.preventDefault(); // 阻止按钮原生的提交动作
  $('#sitemap_diff').submit();
  // more code
});

方案3：绑定表单submit事件 #

去掉按钮的click处理，直接绑定表单的submit事件，利用按钮原生的submit触发逻辑，更符合表单设计规范：

$('#sitemap_diff').submit(function() {
  // 原来的more code逻辑放到这里
});

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