多次克隆和插入元素

发布于 12-21 23:47 字数 885 浏览 5 评论 0原文

可能是一个常见问题,但我正在寻求解决和理解该问题的帮助。

我正在制作一个允许您添加更多字段的表单。这是一个精简版本:

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/

Probably a common issue, but I'm looking for help in both fixing and understanding the issue.

I'm making a form that allows you to add more fields. Here's a stripped down version:

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

});    

When you click copy, it works once, but not any more. If I check what's going on, the to_copy variable has the correct value, and no errors are triggered.

Can anyone explain why it doesn't work, as well as pointing me in the right direction.

My next stage is going to be to modify the names of the fields to have a number appended to them (i.e. input, input1, input2 etc), perhaps explaining why I've chose this approach.

Here's a live version: http://jsfiddle.net/nGmYb/1/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

椵侞2024-12-28 23:47:47

问题是您在单击事件中将克隆附加到 DOM。第二次单击时,您将元素重新添加到 DOM 中。请尝试以下方法:

$(document).ready(function() {
    var to_copy = $(".to_copy").clone();

    $("#copy").on("click", function(e) {
        e.preventDefault();
        $(this).before(to_copy.clone());
    });

});

The issue is that you're attaching the clone to the DOM within the click event. On the second click you are re-adding the element to the DOM. Try the following instead:

$(document).ready(function() {
    var to_copy = $(".to_copy").clone();

    $("#copy").on("click", function(e) {
        e.preventDefault();
        $(this).before(to_copy.clone());
    });

});
恰似旧人归2024-12-28 23:47:47

一旦克隆了 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/< /a>

Once you've cloned the DOM element once, you have a single copy. When you use .before with it, it's appended; when you use .before twice, it's moved.

The solution is simply to clone it repeatedly:

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文