multiple div ajax加載

Question

我在一個頁面中有多個div，其內容通過ajax加載。我想顯示一個加載gif，它會執行以下操作，基本上ajax_load_comments和pics是帶有動畫gif背景的div（分別在註釋和pics容器中），顯示在ajaxStart上並隱藏在ajacstop上。

問題是無論哪個容器正在更新，它們都顯示出來。我如何將它們綁定到特定容器的ajaxStart？我喜歡在主js文件中進行一次綁定，而不是在不同的頁面中進行多次綁定。

$("#ajax_load_pics, #ajax_load_comments").bind("ajaxStart", function(){ 
     $(this).fadeIn('slow'); 
     $(this).parent().animate({ 
      opacity: 0.3 
     }, 'slow', function() { 
      // Animation complete. 
      }); 

    }).bind("ajaxStop", function(){ 
     $(this).fadeOut('slow'); 
     $(this).parent().animate({ 
      opacity: 1 
     }, 'slow', function() { 
      // Animation complete. 
      }); 
    }); 

好的，這裏是我現在正在做的，但我真的看不到加載div。

$('.pagination a').live("click", function() { 
     showLoad($(this).parent()); 
     /* $.get(this.href, null, function (data) { 
      $('#com_prog_loading').fadeOut('slow'); 
      elem.remove($('#com_prog_loading')); 
     }, 'script');*/ 
     $.get(this.href, null, null, 'script'); 
     return false; 
    }); 

function showLoad(elem) { 
    elem.parent().prepend("<div id='com_prog_loading'></div>"); 
    $('#com_prog_loading').fadeIn('slow'); 
} 

function hideLoad() { 


} 

Answer 1

Sry基因的困惑：

$('.pagination a').live("click", function() { 
     var $loadingDiv = $(this).closest('div.loading').fadeIn(); 
     $.get(this.href, function() { 
          $loadingDiv.fadeOut(); 
         }, 'script'); 
     return false; 
    }); 

這使用closest向上行進的DOM，找到你的加載股利和表現出來。 ajax回調隱藏它。如果您希望針對不同的呼叫擁有獨立狀態，則必須手動管理它們。

這是假設你把你的加載的div到標記，並通過CSS隱藏起來，比如

<style> div.loading { display: none; } </script> 

<div class="pagination"> 
    <div class="loading" >Loading message or animate gif or something</div> 
    <div class="content">Maybe ajax content goes here? not sure about what you're doing exactly</div> 
    <a href="url.html">Link</a> 
</div> 

如果你真的想手動創建的元素：

$('.pagination a').live("click", function() { 
      var $loadingDiv = $('<div>', { 
            class: 'loading' // be sure to use class, id's are specific to ONE element only 
          }).appendTo($(this).closet('.pagination')) // or whatever closest class exists - again, not sure of your markup 
          .html('Loading...'); // but i think it's just an animated gif, ya? 
          .fadeIn(); 
      $.get(this.href, function() { 
           $loadingDiv.fadeOut('fast', function() { 
                   $(this).remove();  
                  }); 
          }, 'script'); 
      return false; 
     });