javascript - AJAX Complete Handler 没有被触发

Question

在我的 Web 应用程序后端进行一些艰苦的工作后，我注意到 GetMeasure 请求最多需要 10 秒才能完成。我决定应用覆盖层，这样潜在的用户就不会因为屏幕上没有任何反应而感到困惑。无论请求是否成功，覆盖层都应该在调用后被删除 - 所以使用完整的处理程序应该是最好的选择 - 至少我认为。我真的不明白为什么，但与成功处理程序相反，完整的处理程序不会被调用。

AJAX 请求:

$_loadingCircle = $('<img id="loading" src="http://www.obergurgl.com/_images/layout/loading.gif"/>');
PopulateOverlay($_loadingCircle);
$.ajax({
    url: 'CoDTracker/Home/GetMeasures',
    type: 'POST',
    dataType: "html",
    data: {
        buID: buid,
        aID: aid,
        lID: lid
    },
    success: function (data) {
        $('#measures').html(data);
    },
    complete: function () {
        $_overlay.remove();
    }
});

请求以状态 200(成功)结束，但叠加层不会被删除。我确信请求已完成，因为我的测量值已填充到页面中，而圆圈则疯狂旋转而不是消失。

我做错了什么吗？

编辑:

叠加定义

function PopulateOverlay($content) {
    $_overlay = $('<div class="overlay">');
    $content.appendTo($_overlay);
    $_overlay.appendTo('body');
}

Answer 1

您的$_overlay定义不正确。请使用:

$_overlay = $('div.overlay');

请参阅 jQuery 选择器以获取更多信息: https://api.jquery.com/category/selectors/选择具有特定类的 div 的方法不是复制整个 <div class=""> ，而是像我在上面的示例中所做的那样。

编辑:事实上，如果您进行此更改，您的 PopulateOverlay 将不再工作，因此您应该只选择它而不将其分配给变量:

complete: function () {
    $('div.overlay').remove();
}