Javascript 在多个按钮上使用jquery.clone函数

我对jQuery不是最熟悉的，这是我第一次使用“克隆”函数

基本上，我想要完成的是有一个包含多个“部分”的表单，每个“部分”都有一个输入字段。我希望用户能够在每个部分中添加任意多的输入字段。这些部分中的每一部分都是基于用户在过程中导入的值，使用一个简单的php循环动态创建的

我使用它来构建表单，但我的问题是用户能够为每个部分添加/删除输入字段。我将其设置为php循环为每个部分创建一个输入字段和“添加”/“删除”按钮。这些项目的id是基于节动态创建的。单击按钮时，它将调用一个javascript函数，该函数克隆现有的输入字段，然后更新新字段id，使其唯一。您可以在这个JSfiddle中看到我目前拥有的一个示例：请注意，由于JSfiddle不允许使用php，所以我只包含了3个部分的html，其中包含了id，所有内容都与php循环创建的内容完全相同。您将看到“添加”按钮不起作用

如果我只是删除了第2节和第3节，并保留了第1节的html和所有javascript，那么一切都会正常工作：

所以很明显，问题都是由于有多个“部分”，但我不知道为什么，因为所有设置都是通过其编号标识符唯一地处理每个部分

知道我哪里出错了吗？我知道这可能有点混乱，所以如果需要任何澄清，请让我知道

谢谢你的帮助

下面是我正在使用的javascript：

$(document).ready(function () {

        $(".addClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1); // the numeric ID of the new input field being added

            //create var which stores the div name
            var divName = 'input' + ch + '_' + num;
            //alert(divName);
            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#' + divName).clone().attr('id', 'input' + ch + '_' + newNum);


            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + ch + '_' + newNum).attr('name', 'name' + ch + '_' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#' + divName).after(newElem);

            // enable the "remove" button
            var btnName = 'btnDel' + ch;
            //alert(btnName);
            // $('#'+btnName).attr('disabled','');

        });

        $(".delClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + ch + '_' + num).remove(); // remove the last element

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

        });


    });

和html，包括所有3个部分：

<form id="myForm">

    <h2>SECTION 1</h2>

    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 2</h2>
    <div id="input2_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name2_1" type="text" name="name2_1">
    </div>
    <div>
        <input id="btnAdd2" class="addClass" type="button" param1="2" value="Add Another">
        <input id="btnDel2" class="delClass" type="button" param1="2" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 3</h2>
    <div id="input3_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name3_1" type="text" name="name3_1">
    </div>
    <div>
        <input id="btnAdd3" class="addClass" type="button" param1="3" value="Add Another">
        <input id="btnDel3" class="delClass" type="button" param1="3" value="Remove Last">
    </div>
</form>

和html，仅包含第1节：

<form id="myForm">
    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />

</form>

---

一般来说，您不需要设置ID和名称就可以离开，在这种情况下，一切都变得简单多了

HTML:

Javascript:

$(function() {
    $(".addClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper").eq(0).clone().show().insertBefore($sect.find(".controls"));
        $sect.find(".delClass").attr('disabled', false);
    }).trigger('click');
    $(".delClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper:last").remove();
        if($sect.find(".inputWrapper:visible").length <= 1) {
            $(this).attr('disabled', true);
        }
    }).attr('disabled', true);
});

---

问题是$.clonedInput查找所有这些div，而不仅仅是当前部分中的div。您需要将每个节包装在一个DIV中，然后使用.parent查找按钮的包含DIV，使用.sides获取该节中的clonedInput元素。@Barmar感谢您快速而有用的回复…我应该意识到我需要一个唯一的标识符来计算.clonedInput，这样它就不会计算所有的元素了。我不太知道如何使用.parent/.sillides实现您的建议，但我能够通过使用.clonedInput声明的唯一部分来纠正它，这就解决了它。我的更改可以在这里看到：不要像param1那样组成属性名，使用data-param1。数据XXX属性保留用于此目的。然后可以使用jQuery的.data“param1”访问它们。

$(function() {
    $(".addClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper").eq(0).clone().show().insertBefore($sect.find(".controls"));
        $sect.find(".delClass").attr('disabled', false);
    }).trigger('click');
    $(".delClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper:last").remove();
        if($sect.find(".inputWrapper:visible").length <= 1) {
            $(this).attr('disabled', true);
        }
    }).attr('disabled', true);
});