javascript - 带有输入字段的重复 DIV

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 演示......

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

Answer 3

尝试这个。应该管用。注意：身份证不能重复。以下代码也将复制带有 id 的 div。

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

演示：

http://jsfiddle.net/XpN95/