我怎樣才能多次添加類/ removeClass？

當用戶通過ajax發送數據時，我想通過CSS在我的頁面上顯示一個加載圖標，然後在ajax調用完成後刪除此加載圖標。頁面成功顯示一次圖標，但不會再次刷新頁面。但是，ajax呼叫正在成功完成多個呼叫。這裏是我的代碼：我怎樣才能多次添加類/ removeClass？

相關HTML：

<head> 
<link rel="stylesheet" href="~/Content/Loading.css" type="text/css&quot; id="loading_gif"/> 
</head> 
... 
... 
<button type="button" class="btn btn-success" id="button">Import</button> 
... 
... 
<div class="modal"><!-- Placed at bottom of page --></div>

阿賈克斯：

$(document).ready(function() { 
    $('#button').click(function() {       
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Submit")', 
      data: { 
       //submit data via jQuery 
      }, 
      dataType: 'json', 
      beforeSend: function() { 
       $body.addClass("loading");       
      }, 
      success: function (data) {       
       //render a partialView      
      }, 
      complete: function() { 
       $body.removeClass("loading"); 
      } 
     });     
    }); 
}(jQuery));

CSS：

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(128, 128, 128, .5) url('../img/ajax-loader-bar.gif') 50% 50% no-repeat; 
} 

/* When the body has the loading class, we turn 
the scrollbar off with overflow:hidden */ 
body.loading { 
    overflow: hidden; 
} 

/* Anytime the body has the loading class, our 
modal element will be visible */ 
body.loading .modal { 
    display: block; 
}

來源

2016-03-22 William Rigby

'＃button'是否被動態替換？ ID是唯一的嗎？嘗試'$（document）.on（'click'，'#button'，function（）{' – Tushar

您的'$（document）.ready（）'設置不正確。「handler。從最後刪除'（jQuery）'。 – Pointy

阿賈克斯全球安裝程序調用

看一看這個答案：https://stackoverflow.com/a/2387709/3298029

這裏就是裝載類添加和刪除一個小提琴： http://jsfiddle.net/0fpdud5h/

jQuery.ajaxSetup({ 
    beforeSend: function() { 
    body.addClass('loading'); 
    }, 
    complete: function(){ 
    body.removeClass('loading'); 
    }, 
    success: function() {} 
});

它觸發多次對這個小提琴。希望這能讓你開始。

來源

2016-03-22 15:53:54

我怎樣才能多次添加類/ removeClass？

回答

相關問題