jQuery表单Ajax提交异常：submit事件绑定后表单仍正常提交

1. 事件绑定未覆盖动态生成的表单 #

如果你的表单是页面加载后通过AJAX或其他方式动态添加到#ajax-progress中的，直接使用$('#ajax-progress form').submit(...)只会绑定初始页面存在的表单，后续新增的表单不会触发你的拦截逻辑。

解决办法：改用事件委托，把事件绑定到静态父元素上（比如#ajax-progress本身），这样不管表单什么时候添加，都能触发事件：

$('#ajax-progress').on('submit', 'form', function(e) {
    e.preventDefault();
    // 执行重新加载#ajax-progress的逻辑
    console.log('表单提交已拦截');
});

2. JS直接调用form.submit()会跳过submit事件 #

你提到的文件上传输入框里的onchange="this.form.submit();"，这种通过JS代码直接调用表单submit()方法的方式，不会触发你绑定的submit事件——只有用户手动点击提交按钮、按回车这类原生交互触发的提交，才会触发submit事件。

针对这种情况，需要修改文件上传的触发逻辑，比如换成自定义处理函数：

<!-- 原代码 -->
<input id="file-upload" type="file" onchange="this.form.submit();" name="file">

<!-- 修改后 -->
<input id="file-upload" type="file" onchange="handleFileSubmit(this);" name="file">

<script>
function handleFileSubmit(input) {
    const form = input.form;
    // 先执行你的AJAX刷新逻辑
    // 若需要提交表单，改用AJAX方式提交，不要直接调用form.submit()
    $.ajax({
        url: form.action,
        method: form.method,
        data: new FormData(form),
        processData: false,
        contentType: false,
        success: function() {
            // 刷新#ajax-progress
            $('#ajax-progress').load(location.href + ' #ajax-progress > *');
        }
    });
}
</script>

3. 排查其他JS干扰问题 #

• 打开浏览器控制台（F12），检查是否有JS错误导致你的submit事件代码未执行；
• 确认是否有其他脚本也绑定了表单的submit事件，并且调用了e.stopPropagation()或强制提交表单，覆盖了你的逻辑。

快速验证方法 #

在你的submit事件处理函数里添加console.log('submit事件触发')：

• 如果控制台没有输出：说明事件没绑定成功，大概率是动态表单的问题；
• 如果有输出但表单仍提交：说明e.preventDefault()未生效，检查事件对象是否正确传递，或是否有其他代码强制提交了表单。

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