Bootstrap4模态框发起POST Ajax执行replaceWith后无断点运行灰屏卡住

• Bootstrap模态框关闭动画的时序冲突：Bootstrap4的modal('hide')方法是异步的，自带300ms左右的淡出过渡动画。无断点运行时，hide调用后动画还没执行完就触发了replaceWith操作，如果返回的response包含模态框相关DOM节点、或是修改了模态框依赖的上下文，就会导致模态框实例状态异常，蒙层无法正常移除。加断点时人为增加了等待时间，动画可以正常执行完成，所以不会出现问题。
• 全局AJAX事件重复绑定：你把$(document).ajaxComplete和$(document).ajaxStop的绑定逻辑放在了每次点击提交按钮的回调中，每点一次提交就会多绑定一次事件回调，后续触发AJAX事件时会重复执行datepickerReload()，多次操作DOM容易引发状态混乱。
• 重复调用模态框隐藏方法：success回调和done回调中都调用了$('#gestioneModal').modal('hide')，相当于对同一个模态框连续触发两次隐藏操作，容易打乱模态框内部的状态机，导致蒙层残留。
• DOM操作逻辑顺序不合理：当前代码在AJAX还未返回的时候就提前执行了datepicker初始化逻辑，新返回的#items节点还没插入页面，这部分初始化完全无效，和后续的datepickerReload也可能产生执行冲突。

修正后的完整代码如下：

// 全局仅绑定一次AJAX全局事件，不要放在点击回调内部
$(document).ajaxComplete(function() {
    datepickerReload();
});
$(document).ajaxStop(function() {
    datepickerReload();
});

$(document).on("click", '#modalSubmit', function(event) {
    event.preventDefault();
    var data = $('form').serialize();
    data += '&addGestione=true';
    
    $.ajax({
        type: "POST",
        url: URL,
        data: data,
        success: function(response) {
            // 监听模态框完全关闭的原生事件，动画结束后再操作DOM
            $('#gestioneModal').one('hidden.bs.modal', function () {
                $('#items').replaceWith(response);
                // 新DOM插入完成后再初始化datepicker
                $('.it-date-datepicker').datepicker({
                    inputFormat: ["dd/MM/yyyy"],
                    outputFormat: 'dd/MM/yyyy',
                });
            }).modal('hide');
        }
    });

    return false;
});

核心修改点说明：

• 把ajaxComplete和ajaxStop的绑定逻辑移到点击事件外部，全局仅绑定一次，避免重复注册回调。
• 取消重复的modal('hide')调用，仅在success回调中调用一次；同时监听Bootstrap模态框原生的hidden.bs.modal事件，该事件会在模态框完全关闭、动画执行结束后才触发，等事件触发后再执行replaceWith操作，彻底避免时序冲突。
• 把datepicker的初始化逻辑移到hidden.bs.modal的回调中，保证#items替换完成、新的DOM节点已经插入页面后再执行初始化，避免绑定无效。
• 用one方法绑定hidden.bs.modal事件，保证每次关闭模态框只会触发一次回调，不会重复绑定事件。

如果修改后仍有蒙层残留，可以在隐藏模态框的代码后额外增加一行兜底逻辑强制移除蒙层：
$('.modal-backdrop').remove();

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