使用jQuery Load函数刷新Bootstrap模态框内DIV时DIV消失的问题

问题原因 #

你当前用$("#ajax_comment_div").load(" #ajax_comment_div")直接刷新自身的写法，会触发jQuery先移除原有#ajax_comment_div元素，再从加载的页面中匹配元素插入原位置。这个过程中，模态框的DOM结构可能因为元素短暂缺失导致样式异常，或者插入后的新元素没有继承原有的显示状态，最终表现为DIV被隐藏。另外，delegate是jQuery旧版事件绑定方法，兼容性和效率不如on。

修复方案 #

改用$.get获取内容后提取目标部分，再替换DIV内部HTML，避免元素被整体移除；同时用更规范的方式阻止表单默认行为，必要时强制维持模态框显示：

$("body").on("submit", "#ajax_comment_submit", function(e){
    e.preventDefault(); // 阻止表单默认提交行为
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),                  
        success: function (data) {
            // 从返回的HTML中提取#ajax_comment_div的内部内容
            var commentDivContent = $(data).find("#ajax_comment_div").html();
            // 替换现有DIV的内容，而非整体替换元素
            $("#ajax_comment_div").html(commentDivContent);
            
            // 若模态框意外隐藏，强制触发显示（替换成你的模态框ID）
            $('#modal-id').modal('show');
        }
    });         
});

额外注意事项 #

• 确认返回的data中确实包含#ajax_comment_div元素，否则会导致DIV内容清空，看起来像隐藏；
• 检查模态框的CSS样式，确保动态加载的内容不会被display: none等规则影响；
• 若使用Bootstrap 3及以上版本，模态框的显示状态依赖.modal类的show相关样式，必要时可手动为模态框元素添加show类。

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