AJAX完整处理程序未触发

Question

在Web应用程序的后端进行了一些艰苦的工作之后，我注意到GetMeasure Request最多需要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();
}

Answer 2

由于叠加层已添加到DOM中，因此您应使用.class删除它：

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

Answer 3

首先，如果没有错误，那就是您的全部代码，它应该可以正常工作。 让我们尝试用一个mimic函数模仿ajax complete的行为作为例子，我们可以这样写：

 var $_overlay = null; // We assume you define it somewhere, and it's visible to all your functions. function PopulateOverlay($content) { $_overlay = $('<div class="overlay">'); $content.appendTo($_overlay); $_overlay.appendTo('body'); } // See this as an ajax call with 2 sec delay. function mimic(cb) { setTimeout(cb, 2000); } function theWorks() { $someEle = $('<div class="example">example</div>'); PopulateOverlay($someEle); mimic(function() { $_overlay.remove(); }); } $(function() { theWorks(); }); 

 .overlay { display: block; width: 100px; height: 100px; background-color: black; } .example { color: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

因此，我想您的代码位于另一个函数内，您可以多次调用它，让我们创建一个按钮，然后单击以触发它：

 var $_overlay = null; // We assume you define it somewhere, and it's visible to all your functions. function PopulateOverlay($content) { $_overlay = $('<div class="overlay">'); $content.appendTo($_overlay); $_overlay.appendTo('body'); } // See this as an ajax call with 2 sec delay. function mimic(cb) { setTimeout(cb, 2000); } function theWorks() { $someEle = $('<div class="example">example</div>'); PopulateOverlay($someEle); mimic(function() { debugger; $_overlay.remove(); }); } $(function() { $('#click').on('click', theWorks); }); 

 .overlay { display: block; width: 100px; height: 100px; background-color: black; } .example { color: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click">Click</button> 

现在，如果在上一个弹出窗口消失之前单击该按钮，则某些弹出窗口将永远存在。

为什么？ 因为当您再次单击时，您的$_overlay将被分配给一个新创建的元素，这意味着您丢失了对上一个弹出窗口的引用，并且当以后执行删除操作时，它将仅删除最新的元素，以及所有以下所有元素删除，即将删除页面上没有的内容，因此您将看不到效果，并且仍会保留较旧的弹出窗口。

我们可以通过在执行代码时将当前元素捕获到另一个变量中来修复它。 如果您预计会有很多弹出窗口，这将起作用。

 var $_overlay = null; // We assume you define it somewhere, and it's visible to all your functions. function PopulateOverlay($content) { $_overlay = $('<div class="overlay">'); $content.appendTo($_overlay); $_overlay.appendTo('body'); } // See this as an ajax call with 2 sec delay. function mimic(cb) { setTimeout(cb, 2000); } function theWorks() { $someEle = $('<div class="example">example</div>'); PopulateOverlay($someEle); // Cache the current overlay, or simply move $_overlay here, if no other using it. var $_curOverlay = $_overlay; mimic(function() { $_curOverlay.remove(); }); } $(function() { $('#click').on('click', theWorks); }); 

 .overlay { display: block; width: 100px; height: 100px; background-color: black; } .example { color: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click">Click</button> 

就像Laurens Swart所建议的那样，如果您一次只需要弹出一个按钮，则只需切换状态即可。

 var $_overlay = $('.overlay'); function PopulateOverlay($content) { $_overlay .empty() // Clear previous .append($content) // Append the content .show(); // Make it visible. } // See this as an ajax call with 2 sec delay. function mimic(cb) { setTimeout(cb, 2000); } function theWorks() { $someEle = $('<div class="example">example</div>'); PopulateOverlay($someEle); mimic(function() { $_overlay.hide(); // Instead of remove, we make it hide, so we can reuse it later. }); } $(function() { $('#click').on('click', theWorks); }); 

 .overlay { display: none; width: 100px; height: 100px; background-color: black; } .example { color: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click">Click</button> <div class="overlay"></div>