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

问题是您在click事件中将克隆附加到DOM。在第二次单击时，您将重新添加元素到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元素，就会有一个副本。当你使用.before时，会附加它;当您使用.before两次时，它会被移动。

解决方案就是重复克隆它：

$(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/

多次克隆和插入元素

2 个答案: