jquery克隆表单元素并将其插入表单中答案

【问题标题】：jquery clone form element and insert it in the formjquery克隆表单元素并将其插入表单中
【发布时间】：2012-06-28 14:58:47
【问题描述】：

嘿，我的问题是这个http://jsfiddle.net/VZ2MK/1/

(function(){

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

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

        $(this).before(input);

        e.preventDefault();

    });

})();

我需要动态添加表单的某些部分，我想我会克隆它然后添加它。它第一次工作，但如果我想添加不止一次，它会停止，我的意思是它不起作用。有什么想法吗？

【问题讨论】：

标签： jquery forms insert clone

【解决方案1】：

您应该通过每次点击来克隆它。 demo。

var input = $('.test');

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

    e.preventDefault();

});

【讨论】：

【解决方案2】：

问题在于before 将元素从当前所在的位置分离，然后再将其插入到所选元素之前。您需要每次都进行克隆，而不是一次：

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

        $(this).before(input);

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

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

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

【讨论】：

【解决方案3】：

克隆每次点击都有效：

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

        e.preventDefault();

    });  
})();

【讨论】：

【解决方案4】：

这应该可行：

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

但我没有使用clone()

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

【讨论】：

这是一个糟糕的答案。它销毁存储在元素上的任何数据或事件处理程序。 This answer另一个问题解释了为什么这是一种不好的技术。
也许操作人员正在寻找这个代替..？