Ajax экран загрузки не отображается после первого раза

Question

Я использую AJAX для вызова сервлета с моей веб-страницы. Пока все хорошо, я добавил код для отображения экрана загрузки, когда сервлет работает, но он работает только в первый раз, после этого вызывается сервлет, и я могу изменить курсор, но экран ожидания не работает

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 (функция (данные).

Как я уже сказал, код выполняется, но экран загрузки загружается только в первый раз. На самом деле, второй раз и далее я получаю ноль, когда пытаясь разрешить деление загрузки. Я также пытался использовать

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

Вместо использования hide (), но тот же результат.

Есть идеи?

Answer 1

Нашли это! после нескольких часов это была моя глупая ошибка. Я получил это

<div id="finalresults">
<div>

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

и делал document.getElementById ("finalresults"). Inner HTML = ""; Во время вызова ajax я удалял загрузочный div, потому что я забыл / в предыдущем div

Спасибо всем и очень сожалею об ошибке