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

}); 

しかし、クローンは一度だけ使用可能のようです。 2回目のAdd a language...ボタンをクリックすると、リスト項目が追加されません。 （興味深いことに、コンソールに変数を出力すると、まだクローンが含まれています！）

HTMLマークアップを文字列として保存する方法もありますが、この方法は動的に行われるので避けていますPHPを介してロードされ、マークアップを変更する必要があるときはいつでも、自分のコードの一部を変更するだけです。

どうすればこの作品を作成できますか？

Answer 1

あなたはコメントを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> 

：

このような1つの李をキープ.hiddenはdisplay:none;にマークされます

.hidden{ 
    display:none; 
} 

あなたは、常にこの李のクローンを作成し、ユーザーがすべての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); 
}); 

Demo