要素を複数回複製して挿入する

Question

おそらくよくある問題ですが、私は問題を修正して理解するのに助けを求めています。

私はフィールドを追加できるフォームを作っています。ここではストリップダウンバージョンです：

HTML

<div class="to_copy"> 
<p>Here is an empty form field.</p> 
    <input name="input" /> 
</div> 
<a href="#" id="copy">Copy</a> 

はjQueryの

$(document).ready(function() { 
    var to_copy = $(".to_copy").clone(); 

    $("#copy").on("click", function(e) { 
     // Some unwritten code to change name="input" to name="input1" 

     $(this).before(to_copy); 
     e.preventDefault();  
    }); 

});  

コピーをクリックすると、一度動作しますが、ではない、それ以上。何が起きているのか確認すると、to_copy変数に正しい値が設定され、エラーは発生しません。

私は正しい方向に向いているだけでなく、うまくいかない理由を誰もが説明できますか？

次の段階では、フィールドの名前を変更して（input、input1、input2など）、このアプローチを選択した理由を説明することになります。ここで

はライブバージョンです：http://jsfiddle.net/nGmYb/1/

Answer 1

問題は、クリックイベント内DOMにクローンを装着していることです。 2回目のクリックで、要素をDOMに再度追加します。代わりに以下を試してください：

$(document).ready(function() { 
    var to_copy = $(".to_copy").clone(); 

    $("#copy").on("click", function(e) { 
     e.preventDefault(); 
     $(this).before(to_copy.clone()); 
    }); 

}); 

Answer 2

DOMエレメントを一度クローンすると、1つのコピーが作成されます。 .beforeを使用すると、追加されます。 .beforeを2回使用すると、移動します。 - 今、あなたはそれを説明してきたので、明らかである

$(document).ready(function() { 
    $("#copy").on("click", function(e) { 
     var to_copy = $(".to_copy").last().clone(); 
     $(this).before(to_copy); 
     e.preventDefault();  
    }); 
});  

http://jsfiddle.net/mblase75/nGmYb/5/