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動態加載的，而我只需要在需要修改標記時更改代碼的一部分-up。

我怎么可能做這個工作？

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);

    });

演示

根據評論：

像這樣保持一個li：

<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;
}

然后在克隆時你總是克隆這個li並使其可見，這樣即使用戶刪除了所有的li，仍然可以添加新元素。

$('#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);
 });

演示