Question

以html格式，当用户按下+按钮时，我想动态添加两个输入。但是，它复制了提交按钮，而不是2个输入。 是否可以选择form-group按钮所属的+？并复制它？

var counter = 1;
$('#form-notifications1')
  .on('click', '.addInput', function() {
    var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="mould-"]').attr('name', 'mould-' + counter).val("").end()
      .find('[name^="email-"]').attr('name', 'email-' + counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-group:last');
    $('.form-control:last').focus();
    console.log("+: " + counter);
    counter++;
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
    console.log("-: " + counter);
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form id="form-notifications1" method="post " action="# " class="form-horizontal " role="form ">
        <fieldset>
          <div class="form-group">
            <div class="row">
              <label for="inputName " class="col-xs-2 control-label ">input</label>
              <div class="col-xs-2">
                <select class="js-states form-control " name="mouldId-1">
                  <option></option>
                  <option value="1 ">1</option>
                </select>
              </div>
            </div>

            <div class="row">
              <label for="inputName" class="col-xs-2 control-label ">Email</label>
              <div class="col-xs-6">
                <input type="email" class="form-control" name="email-1" />
              </div>

              <div class="col-xs-1">
                <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-xs-12 ">
              <button type="submit " class="btn btn-primary ">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

编辑

我在id="form-notifications1 "中有一个空格，这就是为什么它没有运行...但是，它复制了按钮而不是2个输入。

Answer 1

您有很多不属于任何空格的空格

旧

<form id="form-notifications1 " method="post " action="# " class="form-horizontal " role="form ">

新

<form id="form-notifications1" method="post" action="#" class="form-horizontal" role="form">

Answer 2

我认为以下代码段是您期望的样子，您在.slice(-1)中有一个多余的var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()，并且在结束之前不确定是什么（空白）班级。

此外，如果您要删除它，则需要将var $row = $('.form-group').slice(-1);修复为.slice(-2)

.slice(-x)，其中x是一个数字，用于选择您要选择的最后一个x元素。

阅读以下有关.slice()的链接以了解更多信息。

var counter = 1;
$('#form-notifications1')
  .on('click', '.addInput', function() {
    var $template = $('.form-group').clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="mould-"]').attr('name', 'mould-' + counter).val("").end()
      .find('[name^="email-"]').attr('name', 'email-' + counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertBefore('#mybtn');
    $('.form-control:last').focus();
    console.log("+: " + counter);
    counter++;
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
    console.log("-: " + counter);
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form id="form-notifications1" method="post" action="#" class="form-horizontal" role="form">
        <fieldset>
          <div class="form-group">
            <div class="row">
              <label for="inputName" class="col-xs-2 control-label">input</label>
              <div class="col-xs-2">
                <select class="js-states form-control" name="mouldId-1">
                  <option></option>
                  <option value="1">1</option>
                </select>
              </div>
            </div>

            <div class="row">
              <label for="inputName" class="col-xs-2 control-label">Email</label>
              <div class="col-xs-6">
                <input type="email" class="form-control" name="email-1" />
              </div>

              <div class="col-xs-1">
                <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
              </div>
            </div>
          </div>

          <div id="mybtn" class="row">
            <div class="col-xs-12">
              <button type="submit " class="btn btn-primary">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

用户按下按钮时添加2个表单输入

2 个答案: