jquery - jqueryクローンフォーム要素をフォームに挿入します

Question

ハイ、私の問題はこれですhttp://jsfiddle.net/VZ2MK/1/

(function(){

    var input = $('.test').clone();

    $('a.add_input').on('click', function(e){

        $(this).before(input);

        e.preventDefault();

    });

})();

フォームのいくつかの部分を動的に追加する必要があり、それを複製してから追加すると思いました。そして、初めて機能しましたが、複数回追加したい場合は停止します。つまり、機能しません。何か案は？

Answer 1

クリックするたびに複製する必要があります。デモ。_

var input = $('.test');

$('a.add_input').on('click', function(e){
    $(this).before(input.clone());

    e.preventDefault();

});

Answer 2

問題はbefore、選択した要素の前に要素を挿入する前に、要素を現在の場所から切り離すことです。クローンは 1 回ではなく、毎回実行する必要があります。

(function(){
    $('a.add_input').on('click', function(e){
        var input = $('.test').last().clone();    

        $(this).before(input);

        e.preventDefault();
    });
})();

元のコードは最初にクローンを挿入しましたが、その後は完全に同じ場所に追加する前に削除しました。

最初に 1、2 回目に 2、3 回目に 4 などを追加しないようlastに、アイテムのクローンを作成しているだけであることに注意してください。$('.test')

Answer 3

すべてのクリックの複製が機能します：

(function(){
    $('a.add_input').on('click', function(e){
var input = $('.test').clone();
        $(this).before(input);

        e.preventDefault();

    });  
})();

Answer 4

これはうまくいくはずです：

http://jsfiddle.net/VZ2MK/4/

でも使わなかったclone()

 (function(){
     input = $('.test').html();   
     $('a.add_input').click(function(e){   
         $(this).before('<div>' + input + '</div>');       
         e.preventDefault();      
     });   
 })();