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)

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

2)

在 ajax 调用中添加 '.complete' 状态并从成功中删除 removeClass 代码并添加到 '.complete' 状态

Answer 2

根据 OP 的编辑更新了答案。 更新后需要多个修复： 1)Anchor 标签有它自己的动作，因此任何与之关联的单独事件处理程序都需要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>