Question

我试图在用户点击按钮时创建两个表单元素，他可以做5次，但我是jQuery的新手，所以我遇到了问题，

这是代码：

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedInput').length; 
        var numTwo     = $('.clonedInputTwo').length; 
        var newNum  = new Number(num + 1);      

        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);


        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        newElemTwo.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);


        $('#input' + num).after(newElem);
        $('#inputTwo' + numTwo).after(newElemTwo);

        $('#btnDel').attr('disabled','');

        if (newNum == 5)
            $('#btnAdd').attr('disabled','disabled');
    });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element
            $('#inputTwo' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });

HTML：

<form id='myForm'>
    <div id='input1' style='margin-bottom:4px;' class='clonedInput'>
        Name: <input type='text' name='name1' id='name1' />
    </div>
    <div id='inputTwo1' style='margin-bottom:4px;' class='clonedInputTwo'>
        School: <input type='text' name='nameTwo1' id='nameTwo1' />
    </div>
    <div>
        <input type='button' id='btnAdd' value='add another name' />
        <input type='button' id='btnDel' value='remove name' />
    </div>
</form>

当我单击按钮时，它会工作一次，然后它会继续创建名称元素，而不是学校元素！

Answer 1

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);

应该是

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'inputTwo' + newNum);

拿一个look（感谢MvanGeest）

使用jQuery动态添加两个表单元素

1 个答案: