Question

Hy，我的问题是http://jsfiddle.net/VZ2MK/1/

(function(){

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

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

        $(this).before(input);

        e.preventDefault();

    });

})();

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

Answer 1

您应该每次点击都克隆它。 demo。

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

jquery clone表单元素并将其插入表单中

4 个答案: