Bootstrap模态框提交AJAX表单时自动关闭问题排查

核心问题：表单默认提交行为未被阻止 #

你的模态框自动关闭，大概率是因为点击"Proceed"按钮时触发了表单的默认提交行为——浏览器会尝试刷新页面或跳转，间接导致模态框被关闭。以下是具体的排查和修复步骤：

1. 阻止表单默认提交动作 #

在AJAX提交逻辑的最开头，必须调用e.preventDefault()来阻止表单的默认行为，这是关键：

// 注意：如果表单是动态加载的，要用事件委托（见步骤3）
$('#form1').submit(function(e) {
    // 阻止表单默认提交，避免页面刷新/跳转
    e.preventDefault();
    
    // 你的AJAX提交逻辑
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(res) {
            // 处理成功逻辑（比如提示用户、更新数据）
            // 这里不要主动调用模态框关闭方法，除非你需要
        },
        error: function(xhr) {
            // 处理错误逻辑
        }
    });
});

2. 检查提交按钮的类型 #

如果你的"Proceed"按钮是<button>标签，默认类型为submit，即使绑定了点击事件，也会触发表单提交。可以直接修改按钮类型：

<button type="button" class="btn btn-primary">Proceed</button>

或者在按钮的点击事件中也阻止默认行为：

$('.btn-proceed').click(function(e) {
    e.preventDefault();
    // 手动触发表单的AJAX提交
    $('#form1').submit();
});

3. 使用事件委托绑定动态加载的表单 #

因为你的表单是通过data-href异步加载到模态框中的，直接绑定$('#form1').submit()不会生效（动态DOM元素无法被直接监听），必须用事件委托绑定到已存在的父元素（比如模态框本身）：

// 将事件委托给模态框，监听动态加载的form1的submit事件
$('#myModalPositions').on('submit', '#form1', function(e) {
    e.preventDefault();
    // 执行AJAX提交逻辑...
});

4. 确认AJAX请求为异步模式 #

jQuery的AJAX默认是异步（async: true），但如果手动设置为false会导致页面阻塞甚至刷新，确保你的AJAX配置中没有强制同步：

$.ajax({
    // ...其他配置
    async: true, // 保持默认即可，无需手动写，但如果之前改了要改回来
    // ...
});

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