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