来自 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();
});

loading div 不显示。我怀疑这是因为在 click 处理程序完成之前 DOM 不会更新。对吗？

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

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();
});