点击Create New按钮后Bootstrap弹窗表单仅首次可用问题求解

问题重现 #

首次点击「Create New」按钮可正常加载弹窗表单，但二次点击后表单无法工作；刷新页面后首次点击恢复正常，再次点击仍失效。

原因分析 #

1. 重复Bootstrap类冲突：代码中外层modal-body嵌套了内层modal-body，导致组件样式与行为异常。
2. 动态内容事件丢失：AJAX加载的表单元素未使用事件委托绑定，弹窗关闭后事件绑定被销毁，二次加载时无法触发交互。
3. 未清空原有DOM：弹窗关闭后未移除已加载的表单内容，重复加载导致DOM中出现重复元素/ID，引发逻辑冲突。

解决方案 #

步骤1：修复嵌套的modal-body类

移除内层的modal-body类，避免样式冲突：

<!-- 修正后的弹窗结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 移除内层多余的modal-body类 -->
                <div id="partial_view_div">
                </div>
            </div>
        </div>
    </div>
</div>

步骤2：监听弹窗关闭事件，清空表单内容

在弹窗隐藏时清空容器内容，避免重复DOM积累：

// 监听modal隐藏事件，清空表单容器
$('#exampleModal').on('hidden.bs.modal', function () {
    $('#partial_view_div').empty();
});

步骤3：动态表单事件使用委托绑定

如果partial view包含提交按钮等交互元素，必须通过事件委托绑定到静态父元素，确保二次加载后事件仍有效：

// 示例：绑定表单提交按钮的点击事件（委托方式）
$('#partial_view_div').on('click', '#submit-airport', function(e) {
    e.preventDefault();
    // 执行表单提交逻辑
    $.ajax({
        type: "POST",
        url: '@Url.Action("SaveAirport", "Airports")',
        data: $(this).closest('form').serialize(),
        success: function(response) {
            if (response.success) {
                $('#exampleModal').modal('hide');
                // 可选：刷新列表等后续操作
            } else {
                alert("保存失败：" + response.message);
            }
        },
        error: function() {
            alert("保存时发生错误");
        }
    });
});

步骤4：优化AJAX加载时机（可选）

将AJAX请求放到modal的shown.bs.modal事件中，确保弹窗完全显示后再加载表单，避免渲染异常：

function LoadNewAirport() { 
    $('#exampleModal').modal('show');
    // 先解绑原有事件，避免重复绑定
    $('#exampleModal').off('shown.bs.modal').on('shown.bs.modal', function () {
        $.ajax({
            type: "GET",
            url: '@Url.Action("LoadNewAirportForm", "Airports")',
            data: {},
            success: function (data) {
                $('#partial_view_div').html(data); 
            },
            error: function (xhr, ajaxOption, thrownError) {
                alert("加载表单时发生错误。");
            }
        });
    });
}

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