jQuery的AJAX加载内容两次

Question

我写的jQuery阿贾克斯简单的负载内容：

$('.bar a[rel]').live('click', function() { 
    if($('.modal-'+ $(this).attr('rel')).length == 0) { 
     $.ajax({ 
      url: 'users/'+ $(this).attr('rel'), 
      success: function(data) { 
       $('header + .container').children().animate({ 
        'height': 0, 
        'padding': 0, 
        'opacity': 0 
       }, 500, function() { 
        $(this).remove(); 

        $(data).hide().appendTo('header + .container').fadeIn(1000); 
       });     
      } 
     }); 
    } 

    return false; 
}); 

为什么这段代码加载内容（appendTo）两次？

Answer 1

动画代码为每个孩子执行一次;你没有提供你的HTML，但由于它运行了两次，我认为可以肯定的是有两个。修改功能直接对家长的工作：

$('header + .container').animate({ 
    'height': 0, 
    'padding': 0, 
    'opacity': 0 
}, 500, function() { 
    $(this).empty(); 

    $(data).hide().appendTo('header + .container').fadeIn(1000); 
}); 

取决于你想要达到的效果，有其他选择，其中包括排队的儿童动画，只有全部完成后，附加数据。一种更为粗糙的方式也可能是延迟数据追加至少是动画时间长度的多倍（本例中为500ms）。这一切都取决于你想要它看起来像什么，但不知何故，我希望简单的方法会很好。

P.S.你的选择器看起来很奇怪，但是因为你完全可以追加工作，所以我怀疑这只是本论坛或拼写错误的缩写形式。否则，某件事肯定是错的。