jQuery +在不同的時間多次追加一個克隆？

Question

我有這種形式，其中有一個部分，用戶可以指定無限數量的值對，特別是語言和熟練程度。

我有構成這樣的DOM：

<ul id="language-list"> 
    <li class="user-language-item"> 
     <select name="language[]" class="user-language-select">...</select> 
     Level: <select name="proficiency[]">...</select> 
     <input type="button" value="Remove" class="remove-language" /> 
    </li> 
    <li class="user-language-item"> 
     <select name="language[]" class="user-language-select">...</select> 
     Level: <select name="proficiency[]">...</select> 
     <input type="button" value="Remove" class="remove-language" /> 
    </li> 
    <li class="user-language-item"> 
     <select name="language[]" class="user-language-select">...</select> 
     Level: <select name="proficiency[]">...</select> 
     <input type="button" value="Remove" class="remove-language" /> 
    </li> 
</ul> 
<input type="button" value="Add another language..." id="add-a-language" /> 

如果用戶點擊了按鈕Add another language...，含有相同的形式的元素的新列表項應插入到列表中。

這裏是我的代碼：

$(function(){ 

    //Save a clone of one list item during initialization. 
    var liItem = $('.user-language-item').last().clone(); 

    $('#add-a-language').click(function(){ 

     //Append the clone to the list item. But this only works once! 
     $('#language-list').append(liItem); 

    }); 

    //Note that there might be an instance where there are no list items present, which is why I opted to clone the a list item during initialization. 
    $('.remove-language').live('click', function(){ 
     $(this).parents('li.user-language-item').fadeOut(500, function(){ 
      $(this).remove(); 
     }); 
    }); 

}); 

但克隆似乎只可用一次。第二次單擊Add a language...按鈕時，不會添加任何列表項。 （有趣的是，當我在控制檯上輸出變量時，它仍然包含該克隆！）

解決此問題的一種方法是將HTML標記保存爲字符串，但我避免使用這種方法，因爲元素是動態的通過PHP加載，我寧願只是在需要修改標記時更改代碼的一部分。

我該如何做這項工作？

Answer 1

您將有充分的時間來克隆它，當你想添加

$('#add-a-language').click(function(){ 
     var liItem = $('.user-language-item').last().clone(); 
     //Append the clone to the list item. But this only works once! 
     $('#language-list').append(liItem); 

    }); 

Demo

按照評論：

保持一個李這樣的：

<li class="user-language-item hidden" id="placeHolderLi"> 
    <select name="language[]" class="user-language-select">...</select> 
    Level: <select name="proficiency[]">...</select> 
    <input type="button" value="Remove" class="remove-language" /> 
</li> 

其中.hidden只是標記爲display:none;

.hidden{ 
    display:none; 
} 

然後同時克隆你總是克隆此裏並使其可見，這樣即使用戶已刪除了所有的利，新的元素仍然可以添加。

$('#add-a-language').click(function(){ 
     var liItem = $('.user-language-item:first').clone(true).show(); 
     //Append the clone to the list item. But this only works once! 
     $('#language-list').append(liItem); 
}); 

Demo