来自Click Handler的jQuery DOM更新

Question

我想在div从点击处理程序调用Ajax更新时显示一个用作加载屏幕,该处理程序可能需要一两秒钟,例如:

var loadingControl;

loadingControl = $("#loading"); // Is initialized after DOM Ready

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
        },
        error: handleAjaxError
    });

    loadingControl.hide();

    e.preventDefault();
});

该loadingDIV不显示.我怀疑这是因为DOM在click处理程序完成之前不会更新.那是对的吗？

如何重新构造此代码以允许DOM在调用后更新.show(),以便加载屏幕div在.ajax运行时可见？

Answer 1

ajax调用是异步的,因此代码继续运行.因此loadingControl.hide(),在ajax启动后立即调用您的函数,尝试移动函数loadingControl.hide();内部success.

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
            loadingControl.hide();
        },
        error: handleAjaxError
    });


    e.preventDefault();
});