单击按钮时,在附加的字段集中添加按钮和输入框

时间:2013-08-27 13:15:51

标签: jquery html

<script>
$(document).ready(function () {



    $("#fieldsetnew-addphone").click(function () {
        var addphonenoinfieldsetnew = $(document.createElement('div'))
            .addClass('fieldset1-inner-phoneno');
        addphonenoinfieldsetnew.after()
            .html('<label>phone no : </label>' + '<input type="text" name="textbox" id="textbox" value="" >' + '<button class="btn btn-danger fieldset1-remove">remove</button>' + '<br>' + '<br>');
        addphonenoinfieldsetnew.appendTo("#fieldset1-outer-phoneno");

    });



    $("#fieldsetnew-add").click(function () {
        var addnewfieldset = $(document.createElement('div'))
            .addClass('fieldset1-inner-phoneno');
        addnewfieldset.after()
                .html(
'<fieldset style="background-color:#B0C4DE;moz-border-radius:15px;-webkit-border-radius:15px;" id="defaultfeild" >' +
        '<br>' +
        '<br>' +
        '<label> label :</label>'+
        '<input  type="label" value="labelname"  placeholder="">'+
        '<button class="btn btn-danger" id="remove" >remove this profile</button>'+
        '<br>' +
        '<br>' +
        '<label>Email :</label>' +
        '<input  type="email" value="labelname"  placeholder="me@example.com">'+
        '<br>'  + 
        '<br>' +
        '<div>'+
        '<br>'+
        '<div id="TextBoxesGroup1">'+
        '<div id="TextBoxDiv1">'+
        '</div>'+
        '</div>'+
        '<button class="btn btn-success" id="fieldsetnew-addphone" > Add phone no </button>'+
        '</div>'+
        '<br>'+
        '<br>'+
        '</fieldset>'+
        '<br>'+
        '<br>');
        addnewfieldset.appendTo("#fieldset-new-add");

    });

});
</script>
</head><body>
<br>



    <br><br>
        <div id="fieldset-new-add">

                <!---add here---->
                <!--- fieldset new---->

        </div><br>



    <button class="btn btn-success"id="fieldsetnew-add">Add new fieldset</button>

当我点击添加手机时没有id="fieldsetnew-addphone"在jquery的附加字段集中添加标签按钮和输入框 请检查并尽快给出ans 每当我想要点击另一个按钮

时添加新手机没有按钮

1 个答案:

答案 0 :(得分:1)

检查此代码:

$(document).ready(function () {

    $("#fieldsetnew-addphone").click(function () {
        var addphonenoinfieldsetnew = $(document.createElement('div'))
            .addClass('fieldset1-inner-phoneno');
        addphonenoinfieldsetnew.after()
            .html('<label>phone no : </label>' + '<input type="text" name="textbox" id="textbox" value="" >' + '<button class="btn btn-danger fieldset1-remove">remove</button>' + '<br>' + '<br>');
        addphonenoinfieldsetnew.appendTo("#fieldset1-outer-phoneno");

    });

    $("#fieldsetnew-add").click(function () {
        var button = $('<button class="btn btn-success" id="fieldsetnew-addphone" > Add phone no </button>');
        var addnewfieldset = $(document.createElement('div'))
            .addClass('fieldset1-inner-phoneno');
        addnewfieldset.after()
            .html(
            '<fieldset style="background-color:#B0C4DE;moz-border-radius:15px;-webkit-border-radius:15px;" id="defaultfeild" >' +
            '<br>' +
            '<br>' +
            '<label> label :</label>' +
            '<input  type="label" value="labelname"  placeholder="">' +
            '<button class="btn btn-danger" id="remove" >remove this profile</button>' +
            '<br>' +
            '<br>' +
            '<label>Email :</label>' +
            '<input  type="email" value="labelname"  placeholder="me@example.com">' +
            '<br>' +
            '<br>' +
            '<div>' +
            '<br>' +
            '<div id="TextBoxesGroup1">' +
            '<div id="TextBoxDiv1">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<br>' +
            '<br>' +
            '</fieldset>' +
            '<br>' +
            '<br>');
        button.appendTo("#fieldset-new-add");
        addnewfieldset.appendTo("#fieldset-new-add");


        button.on('click',function(){
           var addnew = $(document.createElement('div'))
            .addClass('fieldset1-inner-phoneno');
        addnew.after()
            .html(
            '<fieldset style="background-color:#B0C4DE;moz-border-radius:15px;-webkit-border-radius:15px;" id="defaultfeild" >' +
            '<br>' +
            '<br>' +
            '<label> label :</label>' +
            '<input  type="label" value="labelname"  placeholder="">' +
            '<button class="btn btn-danger" id="remove" >remove this profile</button>' +
            '<br>' +
            '<br>' +
            '<label>Email :</label>' +
            '<input  type="email" value="labelname"  placeholder="me@example.com">' +
            '<br>' +
            '<br>' +
            '<div>' +
            '<br>' +
            '<div id="TextBoxesGroup1">' +
            '<div id="TextBoxDiv1">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<br>' +
            '<br>' +
            '</fieldset>' +
            '<br>' +
            '<br>');

            addnew.appendTo("#fieldset-new-add");
        });
    });

});