克隆表格，添加新的每一个

Question

我需要在点击按钮时逐一添加表格，但在第二次点击时该功能追加了多个表格。

我的脚本哪里做错了？

谢谢

$('.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>

Answer 1

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

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

请注意，.clone() 不会采用您传递的参数。

Answer 2

另一个 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>

Answer 3

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

为什么不使用 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 模板标签及其功能的更多详细信息，请查看需要 IE11 支持时可以使用的 MDN Web Docs. Also have a look at caniuse.com to see the browser support. As you can see, Microsofts Internet Explorer 11 does not support the template tag and its functionality. For that there are some astounding polyfills like the Web Components small template polyfill。

Answer 4

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

然后，.clone() 来自已存储的 "template" 单击。

请注意，您必须为 "template"...克隆，然后再次单击！

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>

克隆表格，添加新的每一个

Clone form, add new each one

javascript

forms

jquery

clone