Append проблема данные загружены

Question

Мой HTML, как это

<div id="rsContainer"> 
     <table id="rsTable"><!-- DATA HERE --></table> 
</div> 

и мой браузер как этот

$('#UpdateAll').click(function() { 

     $('#status').fadeIn('500').text('Loading... This may take a while.'); 
     $.ajax({ 
     type: 'post', 
     url: 'func.php', 
     data: 'action=updateAll', 

     success: function(response) { 
      $('#response').fadeOut('500').fadeIn('500').append(response); 

      $('#rsTable').slideUp('1000').load('index.php #rsTable', function() { 
       $(this).appendTo('#rsContainer').slideDown('1000'); 
      }); 

      $('#status').fadeOut('500').empty(); 
     } 
     });  
    }); 

Это прекрасно работает и, но после того, как appening HTML, выглядит следующим образом

<div id="rsContainer"> 
     <table id="rsTable"> 
      <table id="rsTable"><!--data--></table> 
     </table> 
</div> 

Как вы можете видеть, это действительно добавляет его к rsTable как я могу поддерживать оригинальная структура?

Thank you.

Answer 1

$('#rsContainer').slideUp('1000').load('index.php #rsTable', function() { 
    $(this).slideDown('1000'); 
}); 

изменить идентификатор slideUp на родительский идентификатор.

Answer 2

В тестах, которые я выполнил, выполнив .emtpy() до того, как .prepend() был примерно на 20% быстрее, чем 200 итераций, чем выполнение .html(). Удивительно, но факт.

Если вы намерены использовать оба rsTable, вы должны добавить счетчик к id или использовать класс, поскольку идентификаторы должны быть уникальными.

Похоже, что вы хотите сделать это, хотя:

$('#rsContainer').empty(); 
$('#rsContainer').prepend($('#rsTable'));