Загрузчик страниц в AJAX ведет себя по-разному на одной странице

Question

Я вызываю загрузчик перед вызовом ajax на моей странице, как показано ниже

    $('#firstbutton').click(function() {
      $('body').addClass('loading');
      $.ajax({
        method: "POST",
        url: "somepage.htm",
        async: false,
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

    $('#secondbutton').click(function() {
      $('body').addClass('loading');
      $.ajax({
        method: "POST",
        url: "somepage2.htm",
        async: false,
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

Все это в отдельном js-файле.Когда я нажимаю первую кнопку (#button), загрузчик отображается и скрывается после завершения вызова и отображения результата, но когда я нажимаю вторую кнопку (#anotherbutton), загрузчик не отображается, но результат получаетотображается через некоторое время.Также этот же набор кода прекрасно работает в Firefox.Я новичок в AJAX, поэтому мне сложно отлаживать.Любая помощь приветствуется.

Сопровождающий HTML

<div class="tab-slider-nav">
    <ul class="tab-slider-tabs">
        <li class="tab-slider-trigger active>tab with #button</li>
        <li class="tab-slider-trigger">tab with #anotherbutton</li>
    </ul>
</div>
<div class="tab-container">
    <div id="tab1" class="tab-body">
        <p>Tab with #firstbutton</p>
        <input type="text">
        <div class="button">
           <a id="firstbutton" class="btn">transfer</a>
        </div>
     </div>
     <div id="tab2" class="tab-body">
        <p>Tab with #secondbutton</p>
        <input type="text">
        <div class="button">
           <a id="secondbutton" class="btn">transfer</a>
        </div>
     </div>
</div>
<div class="loadingModal">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

Загрузчик CSS

    .loadingModal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8);
    }

    .loadingModal ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        display: flex;
    }

    .loadingModal ul li {
        list-style: none;
        width: 15px;
        height: 15px;
        background: #1c1d4c;
        margin: 0 5px;
        border-radius: 50px;
        -webkit-animation: animate 1.4s linear infinite;
        -moz-animation: animate 1.4s linear infinite;
        -ms-animation: animate 1.4s linear infinite;
        -o-animation: animate 1.4s linear infinite; 
        animation: animate 1.4s linear infinite;
    }

    @keyframes animate {
        0% {
           transform: translateY(0);
        }
        60% {
           transform: translateY(0);
        }
        80% {
           transform: translateY(-40px);
        }
        100% {
           transform: translateY(0);
        }
    }

    .loadingModal ul li:nth-child(1) {
        animation-delay: 0s;
    }

    .loadingModal ul li:nth-child(2) {
        animation-delay: -1.2s;
    }

    .loadingModal ul li:nth-child(3) {
       animation-delay: -1s;
    }

    .loadingModal ul li:nth-child(4) {
       animation-delay: -.8s;
    }

    .loadingModal ul li:nth-child(5) {
         animation-delay: -.6s;
    }

    body.loading .loadingModal {
        overflow: hidden;
        display: block;
    }    

Answer 1

Обновлен ответ в соответствии с правками ОП. После обновления потребовалось несколько исправлений: 1) У тега привязки есть свое собственное действие, поэтому для работы с любым отдельным обработчиком событий требуется preventDefault(). 2) Async false устарела, поэтому вы должны удалить его из своего кода.

 $('#firstbutton').click(function(e) {
      e.preventDefault();
      $('body').addClass('loading');
      $.ajax({
      method: "GET",
        url: "https://jsonplaceholder.typicode.com/todos/1",
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

    $('#secondbutton').click(function(e) {
     e.preventDefault();
      $('body').addClass('loading');
      $.ajax({
        method: "GET",
        url: "https://jsonplaceholder.typicode.com/todos/1",
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

.loadingModal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8);
    }

    .loadingModal ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        display: flex;
    }

    .loadingModal ul li {
        list-style: none;
        width: 15px;
        height: 15px;
        background: #1c1d4c;
        margin: 0 5px;
        border-radius: 50px;
        -webkit-animation: animate 1.4s linear infinite;
        -moz-animation: animate 1.4s linear infinite;
        -ms-animation: animate 1.4s linear infinite;
        -o-animation: animate 1.4s linear infinite; 
        animation: animate 1.4s linear infinite;
    }

    @keyframes animate {
        0% {
           transform: translateY(0);
        }
        60% {
           transform: translateY(0);
        }
        80% {
           transform: translateY(-40px);
        }
        100% {
           transform: translateY(0);
        }
    }

    .loadingModal ul li:nth-child(1) {
        animation-delay: 0s;
    }

    .loadingModal ul li:nth-child(2) {
        animation-delay: -1.2s;
    }

    .loadingModal ul li:nth-child(3) {
       animation-delay: -1s;
    }

    .loadingModal ul li:nth-child(4) {
       animation-delay: -.8s;
    }

    .loadingModal ul li:nth-child(5) {
         animation-delay: -.6s;
    }

    body.loading .loadingModal {
        overflow: hidden;
        display: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="tab-slider-nav">
    <ul class="tab-slider-tabs">
        <li class="tab-slider-trigger active">tab with #button</li>
        <li class="tab-slider-trigger">tab with #anotherbutton</li>
    </ul>
</div>
<div class="tab-container">
    <div id="tab1" class="tab-body">
        <p>Tab with #firstbutton</p>
        <input type="text">
        <div class="button">
           <a id="firstbutton" class="btn">transfer</a>
        </div>
     </div>
     <div id="tab2" class="tab-body">
        <p>Tab with #secondbutton</p>
        <input type="text">
        <div class="button">
           <a id="secondbutton" class="btn">transfer</a>
        </div>
     </div>
</div>
<div class="loadingModal">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<div class="loadingModal">loader</div>
</body>

Answer 2

Вы просто пытаетесь с помощью

1)

 // change for both click 
 $(document).on('click','#anotherbutton',function(){
    // code
 });

2)

Добавить состояние «.complete» в вызове ajax, удалить код removeClass из успеха и добавить вв состояние ".complete"