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.你的選擇器看起來很奇怪，但是因爲你完全可以追加工作，所以我懷疑這只是本論壇或拼寫錯誤的縮寫形式。否則，某件事肯定是錯的。