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类上使用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。

Answer 4

您要复制.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>

克隆表格，每个添加一个

4 个答案: