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，在将元素插入到所选元素之前，它会从当前位置分离元素。您需要每次都进行克隆，而不是一次：

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

        $(this).before(input);

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

您的原始代码第一次插入了克隆，但在随后的情况下将其删除，然后将其重新添加到完全相同的位置。

请注意，我只是克隆项目以避免last第$('.test')一次添加 1，第二次添加 2，第三次添加 4，等等。

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