jQuery克隆表单不能在同一页面中工作两次

Question

我试图在同一个页面中使用相同的表单两次该表单工作一次但不是两次我认为问题出在 id 或其他东西上，但我不确定我对 javascript 不是很好

帮助表示赞赏。

<!DOCTYPE html>
<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <script>




    $(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value


        // H2 - section
        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);

        // Title - select
        newElem.find('.label_ttl').attr('for', 'ID' + newNum + '_title');
        newElem.find('.select_ttl').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');

        // First name - text
        newElem.find('.label_fn').attr('for', 'ID' + newNum + '_first_name');
        newElem.find('.input_fn').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');




    // Insert the new element after the last "duplicatable" input field
        $('#entry' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        if (newNum == 5)
        $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
            {
                var num = $('.clonedInput').length;
                // how many "duplicatable" input fields we currently have
                $('#entry' + num).slideUp('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "add section");});
            }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr('disabled', true);
});







    </script>
</head>

<body>
    <div id="wrapper">
    <div class="sign-up_box">
        <form action="#" method="post" id="sign-up_area">
            <div id="entry1" class="clonedInput">
                <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>


               <fieldset>
                    <label class="label_ln" for="last_name">Last name:</label>
                    <input class="input_ln" type="text" name="last_name" id="last_name" value="">
                </fieldset>

            </div><!-- end #entry1 -->

            <div id="addDelButtons">
                <input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
            </div>





            <fieldset class="form-actions">
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </div><!-- end sign-up_box -->
  </div>







      <div id="wrapper">
    <div class="sign-up_box">
        <form action="#" method="post" id="sign-up_area">
            <div id="entry1" class="clonedInput">
                <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>


               <fieldset>
                    <label class="label_ln" for="last_name">Last name:</label>
                    <input class="input_ln" type="text" name="last_name" id="last_name" value="">
                </fieldset>

            </div><!-- end #entry1 -->

            <div id="addDelButtons">
                <input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
            </div>





            <fieldset class="form-actions">
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </div><!-- end sign-up_box -->
  </div>







    </body>
</html>

Answer 1

ID 标记在 HTML 文档中必须是唯一的，否则它们将无法正常工作。您可能想要“class”而不是“id”，并使用 jQuery 类选择器来选择适当的字段，具体取决于您要执行的操作。

以下是一些与此相关的现有 StackOverflow 问题：

Using same ID for in multiple HTML tags?

Several elements with the same ID responding to one CSS ID selector

javascript duplication ID conflict

Answer 2

您不能简单地克隆具有 id 属性的元素。任何单个页面上都不能有两个具有相同 id 的元素。所以请相应地更改克隆元素的id，以及代码中对它们的引用。