我想出了一个用于克隆我的调查问卷部分的脚本,当我点击“添加客户”按钮时,它会创建克隆,但按钮会保持固定,而不是向下移动新克隆下面的页面。这是它的一个JSfiddle https://jsfiddle.net/Optiq/ot010v4a/
我设置按钮的方式是
<div id="bttnfrm" style="width:100%; height:32vh;">
<button type="button" class="button" id="add_cus" style="width:22%; height:40px; float:right; margin-right:7%; clear:both; font-family:Verdana, Geneva, sans-serif; color:#FC0;" value="Add Customer" >Add Customer</button>
<br /><br /><br /><br /><br /><br />
<div class="texfrm_o" style="width:88%; height:auto;">
<button type="button" class="button" id="p20_01_back" style="width:22%; height:40px; float:left; margin-left:22%; color:#FC0; font-family:Verdana, Geneva, sans-serif;" value="Back">Back</button>
<button type="button" class="button" id="p20_01_no" style="width:22%; height:40px; float:right; margin-right:22%; color:#FC0; font-family:Verdana, Geneva, sans-serif;" value="Next">Next</button>
</div>
</div>
我用于克隆的JQuery是
$("#add_cus").click(function(){
var num = $('.clone_el').length;
var newNum = new Number(num+1);
var newClone = $("#cloner").clone().appendTo("#page20").after(newClone);
newClone.attr('id',('cloner')+newNum).find("input, textarea, select, #cus_title").each(function(){
var item = $(this);
var type = this.type;
var tag = this.tagName.toLowerCase();
if(type=='text'||tag=='textarea'){
item.attr('name', item.attr('name')+newNum).attr('id', item.attr('id')+newNum).val('');
}
else if(tag=='select'){
item.attr('name', item.attr('name')+newNum).attr('id', item.attr('id')+newNum).selectedIndex=0;
}
else if(item.attr('name')=='Customer_1'){
item.attr('name',('Customer_')+newNum);
}
else if(item.attr('id')=='cus_title'){
item.text("Customer "+newNum);
}
});
//$("#bttnfrm").appendTo("#page20").after(newClone);
});
正如你所看到的,我试图将主按钮框架附加到新克隆下面的页面(我最初没有“bttnfrm”div包裹按钮并想出它来尝试附加)但是没有按预期工作。在第一次点击时,该部分向下移动了一根头发,然后在第二次点击时,它向下移动到第二个克隆下方,并且几乎保留在倒数第二个克隆的下方。
当我真正想到我正在做的事情时,这没有任何意义,因为当它真正是创建克隆的过程时,我认为它是“最新的克隆”。总而言之这甚至都不应该成为一个问题,所以在我试图编制一些疯狂的代码只是为了让按钮移动之前,我想看看你们中是否有人能够指出我做错了什么。
答案 0 :(得分:0)
这是因为您使用id = cloner克隆了fieldset标记,并且您的按钮不在克隆者ID中。