jQuery ajax 完成时调用函数

Question

我想在加载并显示引导对话框后调用我的函数 loadTest()。

$(".btn").on("click", function() {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        data: {
            html: '',
            delay: 0.1
        },
        success: function(data) {
            $('body').append('<div id="test_modal_wrapper"></div>');
            $('#test_modal_wrapper').html(data);
            $("#modal").modal({backdrop: 'static'});

            $('#modal').on('hidden.bs.modal', function() {
                $('#test_modal_wrapper').remove();
            });
            loadTest(1, 3);
            loadTest(2, 2);
            loadTest(3, 1);
        }
    });
});

function loadTest(id, delay) {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        async: false,
        data: {
            html: '<div class="test-case"><h5>Testing connection '+ id +'</h5></div>',
            delay: delay
        },
        success: function(data) {
            $('.modal-body').append(data);
        }
    });
}

问题是对话框等待所有调用 loadTest() 完成，然后显示带有 loadTest() 函数结果的对话框。

我想要的是首先加载对话框，然后 loadTest() 这样做很神奇。 :)

jsfiddle example

Answer 1

如果您想推迟loadTest 直到模式打开，请使用shown.bs.modal 事件：

 $('#modal').on('shown.bs.modal', function() {
        loadTest(1, 3);
        loadTest(2, 2);
        loadTest(3, 1);
 });