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

标签： jqueryhtmlcssajax

Answer 1

你只需尝试

1)

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

2)

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