克隆表单，每一个添加新的答案

【问题标题】：Clone form, add new each one克隆表单，每一个添加新的
【发布时间】：2019-08-11 14:40:06
【问题描述】：

单击按钮时需要逐个添加表单，但在第二次单击时，该功能会附加多个表单。

我在脚本中做错了什么？

谢谢

$('.add-more-btn').click(function() {
  var clone = $('.form-main').clone('.form-block');
   var   block = $('.form-block')
  $(block).append(clone);
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

【问题讨论】：

clone 函数将所有元素与类.form-main 匹配。所以第二次加 2，第三次加 4，以此类推。
.clone() only accepts a Boolean 所以.clone('.form-block') 是错误的
谢谢大家

标签： javascript jquery forms clone

【解决方案1】：

您想要复制 .form-block 并将其附加到 <form>...
所以先正确识别元素...要克隆的表单和元素。

然后，.clone() 在点击时来自存储的“模板”。

请注意，您必须为“模板”克隆...再次点击！

var template = $(".form-block").clone();
var form = $(".form-main");

$('.add-more-btn').on('click',function() {
   var newFormBlock = template.clone(); // Clone again here, to be able to append more than once.
   form.append(newFormBlock);
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

【讨论】：

【解决方案2】：

因为在 css 类上使用 clone 方法，每个带有 css 类.form-block 的 div 容器都会被克隆。当您使用 css 类 .form-block 添加另一个块时，您将获得两个具有相同类名的块。在下一次单击时，您克隆两个项目，依此类推。

为什么不使用 HTML5 模板标签。使用这种原生类型的模板，您可以存档几个优点。您的表单会更快，因为您不需要加载 jQuery 库。只需几行原生 JavaScript，您就可以归档您想要的内容。看看下面的例子。

<form id="my-form" action="" method="post">

</form>
<button id="add-button">Add</button>
<template id="my-template">
    <div>
        <label>
            <span>Name</span>
            <input type="text" name="name[]" placeholder="your name">
        </label>
    </div>
</template>

到目前为止，这是一个 html 示例。您可以在此处添加自己的输入元素和样式。这段代码仅用于示例目的。

现在是使用原生 JavaScript 的时候了。

<script>
    document.getElementById('add-button').addEventListener('click', function(event) {
        var form = document.getElementById('my-form'),
            template = document.getElementById('my-template'),
            clone = document.importNode(template.content, true);

        form.appendChild(clone);
    }, false);

    // to add the first input element automatically
    var event = new Event('click');
    document.getElementById('add-button').dispatchEvent(event);
</script>

这适用于所有现代浏览器。有关 html5 模板标签及其功能的更多详细信息，请查看MDN Web Docs。还可以查看caniuse.com 以查看浏览器支持。如您所见，Microsoft 的 Internet Explorer 11 不支持模板标签及其功能。为此，当需要 IE11 支持时，您可以使用一些令人惊叹的 polyfill，例如 Web Components small template polyfill。

【讨论】：

【解决方案3】：

html 的另一个解决方案是复制第一组元素。

var clone = $('.form-main').html();
$('.add-more-btn').click(function() {
  $('.form-main').append(clone);
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Clone forms</title>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <form class="form-main">
      <div class="form-block">
        <div class="form-group">
          Name
        <input type="text" name="name[]" class="form-control">
        </div>
        <div class="form-group">
          Email
        <input type="text" name="email[]" class="form-control">
        </div>
        <hr>
      </div>
    </form>
    <a class="btn btn-primary add-more-btn">Add one</a>
  </div>
</div>
</div>

【讨论】：

【解决方案4】：

不要在单击按钮时进行克隆。它正在克隆点击时表单中的内容，每次点击都会增加。相反，在加载时克隆表单并将其存储在变量中。然后多次使用它。

var clone = $('.form-block').clone();
$('.add-more-btn').click(function() {
  $('.form-main').append(clone);
});

请注意 .clone() 不接受您传递的参数。

【讨论】：

这将附加克隆的元素一次......然后只“移动”它。 .clone() 方法必须在点击时被调用。
并且<form> 元素（.form-main）正在被克隆（这里是父元素）。它会产生一个嵌套的<form>，这是无效的。
感谢@LouysPatriceBessette 我已更新代码以选择表单块并附加到表单。
谢谢大家