Как использовать несколько номеров ввода?

Question

Я создаю таблицу, чтобы добавить новые строки, где каждая строка имела входное количество, но не работает.

Когда я добавляю больше, чем цифру, количество первых шагов ввода больше одного раза.

Я хочу, чтобы каждый шаг ввода 1 раз за клик.

Мой HTML - Джейд:

table(class=["table","table-hover", 'table-reception']) 
       thead 
        tr 
        th Referência 
        th Designação 
        th Quantidade 
       tbody 

Мое мнение: (Когда я прочитал штрих-код я добавить новый тр)

tr(class="item-article", id="#{data.ref}", data-codigo="#{data.codigo}") 
     td(class="td-ref") 
     span #{data.ref} 
     td(class="td-design") 
     span #{data.design} 
     td(class="td-qtt") 
     <input type='button' value='-' class='minus' /> 
     <input type='text' size='10' class='value' value='0' /> 
     <input type='button' value='+' class='plus' /> 

мой JQuery:

function btnPlusMinus() 
{ 
    $('.minus, .plus').click(function (e) { 
    e.preventDefault(); 
    var $input = $(this).siblings('.value'); 
    var val = parseInt($input.val(), 10); 
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1)); 
    $(".barCode").val(''); 
    $(".barCode").focus(); 
    }); 
} 

Jquery - штрих-код для загрузки:

function receptionArticle() 
    { 
     $('.barCode').change(function() 
     { 
     barCode = $(this).val(); 
     //alert($(this).val()); 
     document.getElementById('scrollToReception').scrollIntoView(); 

     $.get("/warehouse-reception-getArticle/"+encodeURIComponent(barCode), function(data) 
     { 
      if(data == 'false') 
      { 
      $.get("/warehouse-reception-popup/", function(data) 
      { 
       $(".popup").html(''); 
       $(".popup").append(data); 
       $('.opacity').show(); 
       $('.popup').show(); 
       closeWarehousePopup(); 
      }); 
      } 
      else 
      { 
      $(".table-reception tbody").append(data); 
      $(".table-reception tbody tr:last").hide(); 
      $('.table-reception tbody tr:last').css("background-color", "#2ecc71").fadeIn(1000); 
      $(".table-reception tbody tr:last").animate({ 
       'background-color': "initial" 
      }, 5000); 
      $("#reception-message").hide(); 
      $(".barCode").val(''); 
      $(".barCode").focus(); 
      btnPlusMinus(); 
      } 

     }); 

     }); 
    } 

Html: Если я добавить пять строк и увеличиваю первый вход результат был 5, а не 1. Если я во втором ряду увеличивает результат был 4 и 1. т.д. ...

Спасибо

Answer 1

Проблема заключается в том, что вы звоните btnPlusMinusInit() каждый раз, когда вы добавляете строку - и с каждым вызовом, являются обязательными для дополнительного события на нем. Поэтому после добавления 3-х строк события для кнопок в первой строке вызываются 3 раза.

Лучше использовать jQuery's on event handler с селектором. Используя селектор (в вашем случае '.minus, .plus'), событие делегировано и влияет на новые элементы, добавленные в DOM.

Так что попробуйте вместо этого:

$('#add-row').click(function() { 
 
    var row = '<tr><td>'+ 
 
    '<input type="button" value="-" class="minus" />'+ 
 
    '<input type="text" size="10" class="value" value="0" />'+ 
 
    '<input type="button" value="+" class="plus" />'+ 
 
    '</td></tr>'; 
 
    $(".table-reception tbody").append(row);  
 
}); 
 
$(document).on('click', '.minus, .plus', function (e) { 
 
    e.preventDefault(); 
 
    var $input = $(this).siblings('.value'); 
 
    var val = parseInt($input.val(), 10); 
 
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1)); 
 
    $(".barCode").val(''); 
 
    $(".barCode").focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-reception"> 
 
<tbody></tbody> 
 
</table> 
 

 
<button id="add-row">Add row</button>

Answer 2

Во-первых, это не очень хорошее решение для обработки функции с классом.

function btnPlusMinusInit() 
 
{ 
 
    $('#plusBtn').click(btnPlus); //use id selector, for unique elements 
 
    $('#minusBtn').click(btnMinus); //use id selector, for unique elements 
 
}; 
 
btnPlusMinusInit(); 
 
function btnPlus(e){ 
 
    var $input = $(this).siblings('#value'); //use id selector, for unique elements 
 
    var inputValue = $input.val(); 
 
    inputValue = inputValue.trim() != "" ? inputValue : 0; //check for empty input or add readonly 
 
    var val = parseInt(inputValue); 
 
    $input.val(val + 1); 
 
    $("#barCode").val(''); //use id selector, for unique elements 
 
    $("#barCode").focus(); //use id selector, for unique elements 
 
} 
 

 
function btnMinus(e){ 
 
    var $input = $(this).siblings('#value'); //use id selector, for unique elements 
 
    // var $input = $('#value'); would be the same for a unique value element. 
 
    var inputValue = $input.val(); 
 
    inputValue = inputValue.trim() != "" ? inputValue : 0; //check for empty input or add readonly 
 
    var val = parseInt(inputValue); 
 
    $input.val(val - 1); 
 
    $("#barCode").val(''); //use id selector, for unique elements 
 
    $("#barCode").focus(); //use id selector, for unique elements 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="minusBtn" type='button' value='-' class='minus' /> 
 
<input id="value" type='text' size='10' class='value' value='0' /> 
 
<input id="plusBtn" type='button' value='+' class='plus' /> 
 
<div id="barCode">HERE IS A BARCODE</div>