Question

基本上我已经设法再次尝试使用jQuery复制DIV及其表单元素。

按钮：

<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>

我希望复制的Div和内容

<div class="row" id="skiller">
    <div class="label">Skill</div>
    <div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>

我尝试过使用克隆方法，我似乎无法创建一个能够在第一个div下面复制它的代码行，并为PHP多数据输入做好准备。

谢谢！

Answer 1

这样的事情将是一个开始：

$("#addSkill").click(function(e){
    e.preventDefault();
    var new_skiller = $("#skiller").clone();
    new_skiller.attr("id", "skiller-"+$(".row").length);
    new_skiller.insertAfter(".row:last");
});

Answer 2

你需要clone然后append() div中的项目，如下所示：

<强> HTML

<div class="thing">
<div class="row" id="skiller">
    <div class="label">Skill</div>
    <div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
</div>

<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>

<强>的jQuery

$(document).ready(function(){

    $('#addSkill').click(function(){
        var thing = $('#skiller').clone();      

        $('.thing').append(thing);
    });

});

查看jsFiddle Demo....

注意：你需要给他们单独的名字/使其成为一个数组来访问

Answer 3

试试这个。应该管用。注意：ID不能重复。以下代码也会复制带有id的div。

$(document).ready(function(){
    $('#addSkill').click(function(e) {
        var skiller = $('#skiller').clone();
        $( "#skiller" ).after( skiller );
    });
});

演示：

http://jsfiddle.net/XpN95/

使用输入字段复制DIV

3 个答案: