创建新 div 时如何防止附加键在按钮中不添加额外值答案

【问题标题】：How to prevent append from key in button to not add extra values when a new div is created创建新 div 时如何防止附加键在按钮中不添加额外值
【发布时间】：2019-11-25 21:03:38
【问题描述】：

我创建了一个表格，将添加产品作为所述产品的详细信息，每个产品有时都会有序列号，用户需要点击启用的序列号才能开始输入序列号。

所以我有一个问题，当我添加一个新产品并在产品 #1 上输入序列号时，它会增加额外的价值。

在更详细和更简单的解释中；

添加产品 -> 创建产品 #2。

启用要键入的产品 #1 表输入到 textarea 的值变成了

SGH983819;
;

我如何不让任何以前的产品的密钥不添加到以前任何附加部分中的;\n？

$(document).ready(function() {

  function enableSerial() {
    $('.enable-serial').on('change', function() {
      var item = $(this).data('item');
      $('.enable-' + item).prop('disabled', !this.checked);
    });
  }

  $('#add_product').on('click', function() {
    var itemNo = $('.product-item').length + 1;
    var appendData =  '<div class="product-item" data-item="' + itemNo +'">' +
    '<span>#' + itemNo +'</span>' +
    '<button type="button" class="btn btn-danger float-right remove_product"><i class="fas fa-trash-alt"></i></button>' +
    '<div class="form-group row">' +
      '<label class="col-sm-2 col-form-label font-weight-bold">Category</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control" name="products[' + (itemNo - 1) + ']category" type="text" placeholder="eg. 333" maxlength="3"required>' +
      '</div>' +
      '<label class="col-sm-1 col-form-label font-weight-bold">Code</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control" name="products[' + (itemNo - 1) + ']code" type="text" placeholder="eg. 22" maxlength="2" required>' +
      '</div>' +
      '<label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control" name="products[' + (itemNo - 1) + ']partnumber" type="text" placeholder="eg. NGH92838" required>' +
      '</div>' +
    '</div>' +
    '<div class="form-group row">' +
      '<label class="col-sm-2 col-form-label font-weight-bold">Brand</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control" name="products[' + (itemNo - 1) + ']brand" type="text" placeholder="eg. Rototype" required>' +
      '</div>' +
      '<label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control" name="products[' + (itemNo - 1) + ']qty" type="number" placeholder="eg. 1" required>' +
      '</div>' +
      '<label class="col-sm-1 col-form-label font-weight-bold">Location</label>' +
      '<div class="col-sm-2">' +
        '<input class="form-control location-ctrl-' + itemNo +' location-ctrl" data-item="' + itemNo +'" type="text" name="products[' + (itemNo - 1) + ']loc_name" list="locations" value="">' +
        '<input type="hidden" class="location-id-' + itemNo +'" name="products[' + (itemNo - 1) + ']location_id" value="">' +
        '<input type="hidden" class="loc-desc-' + itemNo +'" name="products[' + (itemNo - 1) + ']loc_desc" value="">' +
      '</div>' +
    '</div>' +
    '<div class="form-group row">' +
      '<label class="col-sm-2 col-form-label font-weight-bold">Description</label>' +
      '<div class="col-sm-8">' +
        '<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">' +
      '</div>' +
    '</div>' +
    '<div class="form-group row">' +
      '<label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>' +
      '<div class="col-sm-5">' +
        '<input class="form-control enable-' + itemNo +' serial-' + itemNo +'" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>' +
      '</div>' +
      '<div class="col-sm-5">' +
        '<button class="btn btn-dark enable-' + itemNo +' keyin-ctrl-' + itemNo +' keyin-ctrl" data-item="' + itemNo +'" type="button" disabled>Key In</button>' +
        '<button class="btn btn-dark ml-1 enable-' + itemNo +' undo-ctrl-' + itemNo +' undo-ctrl" data-item="' + itemNo +'" type="button" disabled>Del</button>' +
        '<input class="form-check-input ml-4 mt-2 pointer enable-serial-' + itemNo +' enable-serial" data-item="'+ itemNo +'" id="checkbox-' + itemNo +'" type="checkbox">' +
        '<label class="form-check-label ml-5 pointer" for="checkbox-' + itemNo +'">tick to enable serialnumber</label>' +
      '</div>' +
    '</div>' +
    '<div class="form-group row">' +
      '<label class="col-sm-2 col-form-label"></label>' +
      '<div class="col-sm-5">' +
        '<textarea class="form-control display-' + itemNo +'" name="products[' + (itemNo - 1) + ']serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>' +
      '</div>' +
    '</div>' +
    '<hr>' +
    '</div>';
    $('#append').append(appendData);
    enableSerial();
    ctrlSerial();
  });

  function ctrlSerial() {
    $('.keyin-ctrl').on('click', function() {
      var item = $(this).data('item');
      var result = $('.serial-' + item).val() + '; \n';
      $('.display-' + item).append(result);
      $('.serial-' + item).val('').focus();
    });

    $('.undo-ctrl').on('click', function() {
    	var item = $(this).data('item');
    	$('.display-' + item).html('');
    });
  }

  $('#append').on('click','.remove_product', function(){
    var itemNo = $('.product-item').length + 1;
    $(this).parent('div').remove();
    itemNo--;
  });

enableSerial();
ctrlSerial();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
    <h4>Product Details</h4>
    <hr>
    <h5>GRN Details</h5>
    <form method="post" action="">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label font-weight-bold">GRN</label>
        <div class="col-sm-4">
          <input class="form-control" type="text" value="020719" name="nnmmyy" readonly>
          <input type="hidden" name="supp_name" value="ABCD Co. Ltd.">
          <input type="hidden" name="supp_do" value="DO97/39901/01">
          <input type="hidden" name="do_date" value="17/07/2019">
        </div>
      </div>
      <!-- Multiple Product addition -->
      <div class="form-group row">
        <label class="col-sm-2 col-form-label font-weight-bold">Product Setting</label><br/>
        <div class="col-sm-5">
          <button type="button" id="add_product" class="btn btn-dark">Add Product&nbsp;<i class="fas fa-plus-square"></i></button>
        </div>
      </div>
      <hr>
      <!-- Frist Group -->
      <div class="product" id="append">
        <!-- Product Details -->
        <div class="product-item" data-item="1">
          <span>#1</span>
          <div class="form-group row">
           <label class="col-sm-2 col-form-label font-weight-bold">Category</label>
           <div class="col-sm-2">
             <input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
           </div>
           <label class="col-sm-1 col-form-label font-weight-bold">Code</label>
           <div class="col-sm-2">
             <input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
           </div>
           <label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>
           <div class="col-sm-2">
            <input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
           </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">Brand</label>
            <div class="col-sm-2">
              <input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
            </div>
            <label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>
            <div class="col-sm-2">
              <input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
            </div>
            <label class="col-sm-1 col-form-label font-weight-bold">Location</label>
            <div class="col-sm-2">
              <input class="form-control location-ctrl-1 location-ctrl" data-item="1" type="text" name="products[0]loc_name" list="locations" value="">
              <input type="hidden" class="location_id-1" name="products[0]location_id" value="">
              <input type="hidden" class="loc_desc-1" name="products[0]loc_desc" value="">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">Description</label>
            <div class="col-sm-8">
              <input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>
            <div class="col-sm-5">
              <input class="form-control enable-1 serial-1" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>
            </div>
            <div class="col-sm-5">
              <button class="btn btn-dark enable-1 keyin-ctrl-1 keyin-ctrl" data-item="1" type="button" disabled>Key In</button>
              <button class="btn btn-dark enable-1 undo-ctrl-1 undo-ctrl" data-item="1" type="button" disabled>Del</button>
              <input class="form-check-input ml-4 mt-2 pointer enable-serial-1 enable-serial" data-item="1" id="checkbox-1" type="checkbox">
              <label class="form-check-label ml-5 pointer" for="checkbox-1">tick to enable serialnumber</label>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-5">
              <textarea class="form-control display-1" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
            </div>
          </div>
          <hr>
        </div>
      <!-- append start -->
      </div>
      
      <datalist id="locations">
          <option value="A0001" data-locationid="1" data-locdesc="Cabinet A"></option>
      </datalist>
    </form>
</main>

我希望有一些建议或方法可以在键入以前的产品序列号时不会增加附加值

【问题讨论】：

标签： javascript jquery html laravel-blade

【解决方案1】：

找到了我自己的解决方法...

添加result.val(''); 将重置任何键

function ctrlSerial() {
    $('.keyin-ctrl').on('click', function() {
      var item = $(this).data('item');
      var result = $('.serial-' + item).val() + '; \n';
      $('.display-' + item).append(result);
      $('.serial-' + item).val('').focus();
      result.val(''); // added this to also wipe clean properly
    });

    $('.undo-ctrl').on('click', function() {
        var item = $(this).data('item');
        $('.display-' + item).html('');
    });
  }

【讨论】：