jQuery中拦截JS调用form.submit()触发的表单提交不生效怎么办

浏览器执行form.submit()原生方法时，不会触发表单的submit事件，这是W3C标准定义的固定行为，和jQuery的事件匹配逻辑无关。

• 只有两类操作会触发可被捕获的冒泡式submit事件：
  • 用户点击表单内type="submit"的按钮、图片类型提交按钮
  • 表单聚焦时按下回车键
• 直接通过JS调用form.submit()时，浏览器会跳过整个事件触发流程，直接执行表单的POST跳转逻辑，因此所有绑定在表单上的submit回调都不会被执行，也无法拦截跳转。

之前的逻辑在使用普通submit按钮时正常生效，就是因为走的是事件触发的正常流程；换成form.submit()调用后直接绕开了事件流，才会出现调试时能看到监听器、但点击链接后完全不触发回调、直接跳转的现象。
另外现有绑定代码存在语法缺失，submit方法的调用结尾少了闭合的右括号：

// 修正后的绑定代码
$("[id^='demo']").submit(function (event) {
    event.preventDefault();
    // 原有AJAX逻辑
}) // 原代码这里缺失了闭合的})

方案1：改用原生requestSubmit()方法触发提交 #

把a标签内直接调用form.submit()的代码替换为requestSubmit()方法：

<!-- 替换原有onclick逻辑 -->
<a href="javascript:{}" onclick="document.getElementById('demo12').requestSubmit();">点击此文本提交表单</a>

该方法会完全模拟用户点击submit按钮的行为，正常触发submit事件，jQuery绑定的拦截逻辑可以直接生效，同时会执行表单内置的校验规则，兼容所有现代浏览器。

注：该方法不支持IE浏览器，如果需要兼容老旧浏览器请使用其他方案。

方案2：抽离统一提交逻辑，直接在触发点调用 #

由于所有demo开头的表单触发后都执行同一套AJAX逻辑，可以把处理逻辑抽成公共方法，在链接点击时直接调用，完全绕开submit事件的触发限制：

// 定义统一处理函数
function processDemoForm(formId) {
    const targetForm = document.getElementById(formId);
    // 收集表单数据，执行原有AJAX请求逻辑
}

对应a标签的onclick改为：

<a href="javascript:{}" onclick="processDemoForm('demo12')">点击此文本提交表单</a>

方案3：全局事件委托统一处理触发逻辑 #

为动态渲染的表单添加统一标识，不用每个链接都写inline的onclick代码，直接在全局绑定点击事件做匹配，更易维护：

// 全局委托点击事件，匹配所有demo表单的触发链接
document.addEventListener('click', function(e) {
    // 匹配带有demo-submit标识的链接
    if (e.target.matches('.demo-submit')) {
        e.preventDefault();
        const formId = e.target.dataset.formId;
        const targetForm = document.getElementById(formId);
        // 执行原有AJAX逻辑
    }
})

对应的a标签写法更规范：

<a href="javascript:{}" class="demo-submit" data-form-id="demo12">点击此文本提交表单</a>

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