Question

如何让add函数在提交按钮之前添加对齐的字段，是否正常我正在做的事情，我只是缺少一些东西来添加字段对齐，或者我必须使函数不同？： https://jsfiddle.net/ab5v3dss/4/

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      Menu
    </div>
    <div class="col-md-6">
      <form id="formHabitaciones" class="form-horizontal" method="post">
        <fieldset>
          <legend>Agregar Hotel</legend>
          <div class="form-group col-xs-12 pull-left">
            <div class="col-xs-3">
              <label class="control-label pull-right" for="ID_del_evento">Evento:</label>
            </div>
            <div class="col-xs-9">
              <select name="ID_del_evento" id="ID_del_evento" class="form-control input-md pull-left">
                <option value=""></option>
                <?php 
     foreach ($results as $row) {
       echo "<option value='" . $row['ID_del_evento'] . "'"; 
       if (!empty($_GET['ID_del_evento'])) {
       if ($row['ID_del_evento'] == $_GET['ID_del_evento']) {
        echo " selected";
        }
      };
       echo ">" . $row['Nombre'] . "</option>";
     }
     ?>
              </select>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="col-xs-3">
              <label class="control-label pull-right" for="Nombre">Nombre:</label>
            </div>
            <div class="col-xs-9">
              <input type="Nombre" class="form-control input-md pull-left" id="Nombre" placeholder="Ingresa el nombre" name="Nombre">
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="col-xs-3">
              <label class="control-label pull-right" for="Tarifa_de_transporte">Tarifa de transpore:</label>
            </div>
            <div class="col-xs-3">
              <input type="text" class="form-control input-md pull-left" id="Tarifa_de_transporte" placeholder="Ingresa la Tarifa_de_transporte" name="Tarifa_de_transporte">
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Habitaciones</label>
            <div class="voca">

              <div class="col-xs-2">
                <input type="text" class="form-control" name="habitacion0].ocupacion" placeholder="Ocupacion" />
              </div>
              <div class="col-xs-2">
                <input type="text" class="form-control" name="habitacion[0].categoria" placeholder="Categoria" />
              </div>
              <div class="col-xs-2">
                <input type="number" class="form-control" name="habitacion[0].camas" placeholder="Camas" />
              </div>
              <div class="col-xs-2">
                <span class="input-group-addon">$</span>
                <input type="number" class="form-control" name="habitacion[0].tarifa" placeholder="Tarifa" />
              </div>
              <div class="col-xs-1">
                <button type="button" class="btn btn-success btn-add">
                  <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Agregar mas
                </button>
              </div>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="col-xs-9">
              <button type="submit" class="btn btn-success">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.col-md-6 form:first'),
      currentEntry = $(this).parents('.voca:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.btn-add:not(:last)')
      .removeClass('btn-default').addClass('btn-danger')
      .removeClass('btn-add').addClass('btn-remove')

    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Quitar   ');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.voca:first').remove();

    e.preventDefault();
    return false;
  });
});

这是我能做的最好的事情： best I could

Answer 1

您的基本想法是正确的，但您有一些编码错误。例如，您在几行上使用逗号而不是分号。

我创建了一支笔，可以更简单地完成您想要的版本。如果您将此作为起点，则可以逐步添加特定功能，并确保它在每个步骤都有效。

<div class="one">
    <p>one</p>
    <button class="append"><p>append</p></button>
    <br><br>
  <button class="submit">Submit</button>
</div>

CSS

div {
  width: 150px;
  min-height: 150px;
  margin: 20px;
  background: yellow;
}

jQuery的：

$(function() {
  $('.append').click(function() {
      $('.submit').before($('.one p:first').clone());
  });
});

https://codepen.io/wahhabb/pen/ZKoqqJ

Answer 2

我创建了一个类并在其中附加了额外的项目。请检查 Fiddle 并告知我们。

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.extras'),
      currentEntry = $(this).parents('.voca:first').addClass('clearfix'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.btn-add:not(:last)')
      .removeClass('btn-default').addClass('btn-danger')
      .removeClass('btn-add').addClass('btn-remove')

    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Quitar');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.voca:first').remove();

    e.preventDefault();
    return false;
  });
});

未对齐的形式的附加字段

2 个答案: