jQuery追加覆蓋最後一個元素

Question

我想動態創建一個列表，我追加一個克隆的div。

首先，我必須在jQuery文檔

<main> 
    <div class="clone_me"> 
     ... 
    </div> 
</main> 

股利，我會克隆，然後在div從頁面中刪除。然後，在keyup上，我使用AJAX調用進行一些搜索並返回20個結果。我可以看到所有20個結果。現在

$(function(){ 
    var clone = $('.clone_me').clone(); 
    $('.clone_me').remove; 

    $(document).on('keyup', 'input', function() { 
     var variable = $(this).val(); 
     $.ajax({ 
      url: "link/to/script.php", 
      type:"POST", 
      dataType: "json", 
      data {variable:variable}, 
      success: function(data){ 
       var json = JSON.parse(data); 
       $.each(json.arrayVal, function() { 
        var value = this.value; 
        clone.find('.details').text(value); 
        $('main').append(clone); 
       } 
      } 
     }); 
    }); 
}); 

，Ajax調用返回20行（我可以在控制檯讀取所有這些，所以我知道它的工作[和是的，當然這只是虛擬的信息，但我知道它的工作原理]）。

當我追加克隆時，由於某種原因，它覆蓋了之前的克隆，所以我最終得到一個包含AJAX調用最後一個值的克隆。

如何獲得所有20個克隆的附加和顯示？

Answer 1

大聲笑，你需要「克隆」克隆變種，如：

$(function(){ 
    var clone = $('.clone_me').clone(); 
    $('.clone_me').remove(); 

    $(document).on('keyup', 'input', function() { 
     var variable = $(this).val(); 
     $.ajax({ 
      url: "link/to/script.php", 
      type:"POST", 
      dataType: "json", 
      data {variable:variable}, 
      success: function(data){ 
       var json = JSON.parse(data); 
       $.each(json.arrayVal, function() { 
        var value = this.value; 
        var newclone = clone.clone().find('.details').text(value); 
        $('main').append(newclone); 
       } 
      } 
     }); 
    }); 
});