第一次后不显示 Ajax 加载屏幕答案

【问题标题】：Ajax loading screen not showing after first time第一次后不显示 Ajax 加载屏幕
【发布时间】：2020-06-09 08:57:56
【问题描述】：

我正在使用 AJAX 从我的网页调用 servlet。到目前为止一切都很好，我添加了一些代码来在 servlet 工作时显示加载屏幕，但这只工作第一次，之后，servlet 被调用，我可以更改光标，但等待屏幕不工作

CSS

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.75;
    background-color: #ffffff;
    -webkit-transition: all .5s ease;
    z-index: 3000;
    display:none;
    vertical-align: middle;
    text-align: center;
  }
  #loading-img {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #297bda;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;
  }

HTML

<div id="loading">
  <div id="loading-img"></div>
</div>

Javascript

$('#compare').click(function() {
//just the relevant part

  $('#loading').show();
....
});

我打电话给

$('#loading').hide();

在.done(函数(数据)中。

正如我所说，代码已执行，但加载屏幕仅在第一次加载。事实上，在尝试解析加载 div 时，我第二次以及更进一步收到 null 。我也尝试过

       document.getElementById("loading").style.visibility = "hidden";
       document.getElementById("loading").style.display = "none";

而不是使用 hide() 但结果相同。

有什么想法吗？

【问题讨论】：

你想让它工作on loading 吗？
可能加载的 div 在 DOM 中不在它不工作的时候。您是否验证了 html 的来源在加载 div 不工作时是否可用。
我也尝试在准备好的文档中添加这个 $(document).ajaxStop(function () { $('#loading').hide(); }); $(document).ajaxStart(functio0n () { $('#loading').show(); });但再次只是第一次工作。我试图删除所有隐藏/显示并检查我是否可以获得 div，再次只是第一次返回......但我没有做任何事情来在 ajax 调用中删除它
加载可能永远不会触发，因为内容在第一次加载后被缓存...

标签： javascript jquery html css ajax

【解决方案1】：

找到了！几个小时后，这是我的愚蠢错误。我得到了这个

<div id="finalresults">
<div>

<div id="loading">
  <div id="loading-img"></div>
</div>

并且正在做 document.getElementById("finalresults").innerHTML = ""; 在 ajax 调用期间，我正在删除正在加载的 div，因为我忘记了前一个 div 中的 /

谢谢大家，真的很抱歉这个错误

【讨论】：