Question

我被困在项目的一部分上，用户应该只是继续填写表单，当用户专注于表单中的最后一个输入时，应该自动添加新行。我不是用JS / jQ伪造的，所以也许你们中的一个可以帮助我......它正在工作，但仍然只是从第一行，而不是从重复的那一行。谢谢你提前

<form class="form-inline" method="post" action="loadin.php">
    <!-- form header -->
    <hr>
    <div class="form-group">
        <select class="form-control" name="vendor" id="vendor">
            <?php 
                foreach($vendors_ as $v){
                    echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
                } 
            ?>
        </select>
        <input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
        <input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
        <button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
    </div>
    <hr>

    <!-- form lines -->
    <div class="duplicate" style="margin-bottom: 5px;">
        <div class="form-group">
            <input type="hidden" class="form-control cleanVal" name="row[]"       id="row">
            <select class="form-control" name="category[]" id="category">
                <?php 
                    foreach($types_ as $t){
                        echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
                    } 
                ?>
            </select>
            <input type="text" class="form-control cleanVal" name="item[]"    id="item"    placeholder="Položka">
            <input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
            <input type="text" class="form-control cleanVal" name="amount[]"  id="amount"  placeholder="Množství">
            <input type="text" class="form-control cleanVal" name="price[]"   id="price"   placeholder="Cena">
            <input type="text" class="form-control cleanVal" name="atest[]"   id="atest"   placeholder="Atest">
            <input type="text" class="form-control cleanVal" name="batch[]"   id="batch"   placeholder="Sarže">
            <input type="text" class="form-control cleanVal" name="expire[]"  id="expire"  placeholder="Expirace"   style="width:80px">
            <input type="text" class="form-control cleanVal x" name="vat[]"   id="vat"     placeholder="DPH"        style="width:45px">
        </div>
    </div>
</form>

$(".duplicate:last input").focus(function() {
    count++;
    var $clone = $('.duplicate:last').clone();
    $clone.find("input,select").each(function(){
        $(this).attr({
            id: $(this).attr("id") + count,
        });
    });
    $("form").append($clone);   
    $(".duplicate:last .cleanVal").val('');

Answer 1

Event delegation允许我们将单个事件侦听器附加到父元素，它将为匹配选择器的所有后代触发，无论这些后代是现在存在还是已添加在将来。

每次添加新元素时都会更改最后一个元素，请在父body或任何其他fixed父级上监听事件。

var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
  count++;
  var $clone = $('.duplicate:last').clone();
  $clone.find("input,select").each(function() {
    $(this).attr({
      id: $(this).attr("id") + count,
    });
  });
  $("form").append($clone);
  $(".duplicate:last .cleanVal").val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
  <hr>
  <div class="form-group">
    <select class="form-control" name="vendor" id="vendor">
    </select>
    <input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
    <input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
    <button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
  </div>
  <hr>
  <div class="duplicate" style="margin-bottom: 5px;">
    <div class="form-group">
      <input type="hidden" class="form-control cleanVal" name="row[]" id="row">
      <select class="form-control" name="category[]" id="category">
      </select>
      <input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
      <input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
      <input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
      <input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
      <input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
      <input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
      <input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
      <input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
    </div>
  </div>
</form>

Fiddle Demo

Answer 2

您必须将焦点事件定义为：

$('body').on('focus', ".duplicate:last input", function() {
   // codes here
}

在关注表单中的最后一个输入时自动添加行

2 个答案:

Fiddle Demo