javascript - 使用 bootstrap ajax 请求模态排序

Question

我想在我的应用程序中全局使用模态窗口，因此设置 jquery 的 ajax 完成和 ajax 启动配置。我遇到一个问题，从 ajax 成功回调中调用的模态窗口与我的 ajax 通知模态冲突，因为它们没有按照我想要的顺序执行。

在这个演示中，我希望它先警报 1，然后警报 2，然后警报 3，但它首先执行成功处理程序...

http://jsfiddle.net/AsRxL/

$(document).ajaxStart(function(){
    alert("1")
    $("#first").modal("show")
})
$(document).ajaxComplete(function(){
    alert("2")
    $("#first").modal("hide")
})

$.get('./',function(d, e){
    alert("3")
    // now the problem is the previous modal has not
    // yet fully dismissed
    $("#second").modal("show")
})

如何让 ajaxComplete 函数触发，并在执行任何回调函数之前删除我的通知模式，这本身可能会创建模式窗口？

Answer 1

它们没有按照您想要的顺序执行的原因在 jQuery 文档中( http://api.jquery.com/ajaxComplete/ ， http://api.jquery.com/ajaxStart/ )

AjaxStart 事件在 ajax 请求实现之前触发。

AjaxComplete 事件在 ajax 完成实现后触发。

$(document).ajaxStart(function(){
    alert("AjaxStart");
});

$(document).ajaxComplete(function(){
    alert("AjaxComplete");
});

$.get('./',function(d, e){
    alert("Get A Start")
}).done(function(){
    alert("Get A Done");
});

$.get('./',function(d, e){
    alert("Get B Start")
}).done(function(){
    alert("Get B Done");
});

因此，如果您运行这个 fiddle ( http://jsfiddle.net/KbzCk/ )，您将看到正确的执行顺序。

如果您使用的是 Bootstrap 3 模式，请尝试检查“事件”部分

$('#modal-id').on('hidden.bs.modal', function () {
    //show another modal
})

尽管如此，显示如此多的模式窗口似乎并不是一个好的方法。

如果您仅将模式用于通知，请尝试使用 toastr: http://www.johnpapa.net/toastr100beta/