forms - 追加 div 改变他的内容动态

Question

我有一个名为 cdefualt 的差异，其中有一些来自其中的表单的输入，我想做这样的事情来克隆它并更改输入名称：

var i = 2;
function add() {
    var item = $('#cdefault').clone();
    item.attr({'style': ''});
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    item.id = $xpto;
    $('#'+$xpto+' input[id="gtitle1"]').attr('name', $xpto);
    $('#'+$xpto+' textarea[id="gmessage1"]').attr('name',$xpto2);
    $(item).appendTo('#ccontainer');
    i++;
}

但这不起作用。我也已经尝试过了，但它只能工作两次（对于原始克隆和第一个克隆）：

var i = 2;
function add() {
    var item = $('#cdefault').clone();
    item.attr({'style': ''});
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    $('#cdefault input[id="gtitle1"]').attr('id', $xpto);
    $('#cdefault textarea[id="gmessage1"]').attr('id',$xpto2);
    $('#cdefault input[name="gtitle1"]').attr('name', $xpto);
       $('#cdefault textarea[name="gmessage1"]').attr('name', $xpto2);
    $(item).appendTo('#ccontainer');
    i++;
}

甚至尝试过这种方式：

function add() {
    $xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
    var div = document.getElementById('cdefault');
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone.id = $xpto;
    clone.style.display = '';
    $("#"+$xpto+" input[id='gtitle1']").attr('name', $xpto);
    $("#"+$xpto+" textarea[id='gmessage1']").attr('name',$xpto2);
    document.getElementById('ccontainer').appendChild(clone);

    i++;
}

http://jsfiddle.net/Theopt/xNfSd/

Answer 1

固定的。将 cdefault id 更改为 id0 和这个 java 脚本：

var i = 2;
var c = 0;
function add() {
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    var klon = $( '#id'+ c );
    klon.clone().attr('id', 'id'+(++c) ).insertAfter( '#inserthere' );
    document.getElementById('id'+(c)).style.display = '' ;
    $("#id"+(c)+" input[id='gtitle1']").attr('name', $xpto);
    $("#id"+(c)+" textarea[id='gmessage1']").attr('name',$xpto2);
    i++;
}