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>