AJAX完全处理程序没有被解雇

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

Answer 2

由于叠加层已附加到DOM中，因此您应使用.class

将其删除

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

Answer 3

首先，如果没有错误，那就是你的所有代码，它应该可以正常工作。 让我们试着做一个例子，使用mimic函数来模仿ajax完成的行为，我们可以这样写：

＆＃13;

＆＃13;

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

＆＃13;

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

.example {
  color: cyan;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以我想，你的代码在另一个函数中，你可以多次调用它，让它按下一个按钮，然后点击触发它：

＆＃13;

＆＃13;

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

＆＃13;

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

.example {
  color: cyan;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，如果在上一次弹出消失前单击按钮，则会有一些弹出窗口永远存在。

为什么呢？因为当您再次单击时，您的$_overlay将被分配给新创建的元素，这意味着您丢失了对上一个弹出的引用，并且稍后删除工作采取操作时，它只删除最新的元素，并且以下所有内容都将删除，即将删除页面上没有的内容，因此您无法看到效果，并且旧的弹出框仍然存在。

我们可以通过在您执行代码时捕获另一个变量中的当前元素来修复它。如果您期望有很多弹出窗口，这将有效。

＆＃13;

＆＃13;

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

＆＃13;

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

.example {
  color: cyan;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者Laurens Swart提示，如果您一次只需要弹出一个状态，只需切换状态。

＆＃13;

＆＃13;

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

＆＃13;

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

.example {
  color: cyan;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;