javascript - 复制表单部分的 jQuery clone() 是在单击时添加多个部分

Question

在 ASP.NET MVC 中开发 Intranet 应用程序时，为了跟踪特定员工组的日常工作事件，我使用 2 列设计了表单。一个用于添加/删除流程按钮，一个用于流程描述，该表单本身包含工作流程描述所需的输入。

主要要求之一是在必要时添加新的工作流程，这意味着复制整个字段集。我提到，我最终可能会通过 1 个表单提交 50 多个工作流程。 现在我认为 jQuery 的 .clone() 方法会让这件事变得简单。但产生了奇怪的效果。

编辑:

问题:

5次点击后，字段集的总数为:9，我应该有6个(1个原始过程和5次点击)。 6 次点击后，我总共获得了 17 个新字段集，7 次点击 = 总共 33 个字段集。

经过两天的搜索和大量的谷歌搜索，我找不到问题。使用的浏览器是 IE11，因为这是公司级别的标准。 非常感谢任何帮助。

下面是我正在使用的 jquery 事件:

    var ACTIVITATEACORD = $("form[name=activitate_acord] > fieldset[data-main=1]").clone();

$('.relative.acord').on('click', function () {
        var num = $("form[name=activitate_acord] > fieldset").length;
        console.log(num);
        var newNum = new Number(num + 1);
        console.log(newNum);
        //var changeDataMainFieldset = ACTIVITATEACORD.data('main');
        //ACTIVITATEACORD.attr("data-main", newNum);
       
        //var changeNameMainFielset = ACTIVITATEACORD.attr('name', CombineStrings(ACTIVITATEACORD.attr("name"), '-', newNum));

        ACTIVITATEACORD.insertAfter('form[name=activitate_acord] > fieldset').last();      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Lines removed for convenience-->
<fieldset name="activitati-accord-main-process-1" data-main="1">
   <fieldset name="descriere-proces-1" data-count="">
        <legend>Descriere proces</legend>

         <div class="form-group col-md-3">
         <label for="proces" class="control-label col-md-4 text-left">Proces:</label>
         <div class="col-xs-7">
          <select name="proces-1" data-id="proces-@(idCounter++)" class="form-control" required>
               <option value="">--</option>
               <option value="11">11</option>
               <option value="43">43</option>
               <option value="6423">6423</option>
           </select>
          </div>
          </div>
 <!--lines removed for conveninece-->
      </fieldset>
  </fieldset>

提前感谢分享!

Answer 1

操作顺序很重要:)

与:

.insertAfter('form[name=activitate_acord] > fieldset').last()

您在每个 fieldset 之后插入克隆的元素，然后要求 jQuery 为您提供最后一个 fieldset

将其更改为:

.insertAfter($('form[name=activitate_acord] > fieldset').last())

现在，您将首先获取最后一个 fieldset，然后仅在最后一个 fieldset 之后附加克隆元素。