如何在彈出式div上顯示多個點擊事件的已經加載的加載器圖標

我在我的web應用程序中使用JQuery 1.8.1。我正在嘗試display a loader icon，直到ajax-request完成後，我的彈出窗口才停留在div上。如何在彈出式div上顯示多個點擊事件的已經加載的加載器圖標

要顯示的圖像是already loaded and present (hidden) on the main page。

<img id="myLoader" alt="" src="images/throbber.gif" style="display: none;"/>

在點擊顯示彈出窗口的鏈接時，我將加載器圖標放在彈出div上。當ajax請求完成時，div將被接收到的數據覆蓋。

$('a#popup').click(function(event){ 
     event.preventDefault(); 
     displayPop(); 
     $('div#popupdiv').html($('img#myLoader').show()); 
     $.ajax({ 
      url: 'someURL', 
      type: 'POST', 
      data: data, 
      dataType: 'json', 
      contentType: 'application/json' 
     }).success(function(data){ 
      $('div#popupdiv').html(data); 
     }); 
});

它只能工作一次。對於所有其他$('a#popup')將其視爲空白。在從螢火蟲調試時，我看到$('img#myLoader')在第一次調用時返回Object[img#myLoader images/throbber.gif]，但其餘的返回Object[]。作爲客戶端編碼的新手，我無法掌握髮生的事情。

如何在ajax請求完成之前在彈出div上顯示加載程序圖標？我不想爲loader本身使用任何ajax請求。請指教。

來源

2013-03-08 Rickesh John

我有同樣的問題。問題在於將jQuery函數html應用於jQuery對象：$('div#popupdiv').html($('img#myLoader'))。這個操作對象表現得非常奇怪。文件明確說明，您只能使用html方法與htmlString。我認爲你可以用append代替html來解決你的問題（這個可以和jQuery一起使用）。我可以建議是這樣的：

var imgLoader = $('img#myLoader').show().remove();

$('a#popup').click(function(event){ 
    event.preventDefault(); 
    displayPop(); 
    $('div#popupdiv').append(imgLoader.clone()); 
    $.ajax({ 
     url: 'someURL', 
     type: 'POST', 
     data: data, 
     dataType: 'json', 
     contentType: 'application/json' 
    }).success(function(data){ 
     $('div#popupdiv').html(data); 
    });

}）;

來源

2013-03-08 08:44:12 XiM

真棒!!!!作品！！！非常感謝:) – 2013-03-08 08:53:42

這是我的榮幸。使用你的力量=） – XiM 2013-03-08 09:04:20

有兩個事件可以處理這確實你的任務

beforeSend: function() { 
     loading(); 
    },

上裝載你顯示你的加載

complete: function() { 
    //here you disable that loading image. 
    }

更多事件的圖像是指：api.jquery.com/jquery .ajax

來源

2013-03-08 07:35:37

感謝您的回覆。實際的問題是$（'img＃myLoader'）在ajax請求完成時變爲空。所以使用之前的發送不能解決問題。它的行爲類似於我上面的代碼 – 2013-03-08 08:45:23

您是否嘗試過使用類而不是ID鏈接？

另外，我想移動：

event.preventDefault();

給函數的盡頭。

來源

2013-03-08 08:01:55

謝謝...我會爲我的代碼的其餘部分:) – 2013-03-08 08:31:09

如何在彈出式div上顯示多個點擊事件的已經加載的加載器圖標

回答

相關問題