为什么我的按钮不按预期向下移动?

时间:2015-11-10 03:28:18

标签: jquery html

我想出了一个用于克隆我的调查问卷部分的脚本,当我点击“添加客户”按钮时,它会创建克隆,但按钮会保持固定,而不是向下移动新克隆下面的页面。这是它的一个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包裹按钮并想出它来尝试附加)但是没有按预期工作。在第一次点击时,该部分向下移动了一根头发,然后在第二次点击时,它向下移动到第二个克隆下方,并且几乎保留在倒数第二个克隆的下方。

当我真正想到我正在做的事情时,这没有任何意义,因为当它真正是创建克隆的过程时,我认为它是“最新的克隆”。总而言之这甚至都不应该成为一个问题,所以在我试图编制一些疯狂的代码只是为了让按钮移动之前,我想看看你们中是否有人能够指出我做错了什么。

1 个答案:

答案 0 :(得分:0)

这是因为您使用id = cloner克隆了fieldset标记,并且您的按钮不在克隆者ID中。