JQuery oniput динамическая таблица

Question

В форму динамически пользователи могут добавлять строки с товарами. В каждой строке есть input, где они указывают количество. К этому input цепляется событие oninput, которое в соседний span выводит тоннаж исходя из количества. Oninput отрабатывает, если пользователь вводит количество, затем создает новую строку и там вводит количество. Но если попытаться изменить данные по количеству в уже заполненных ячейках, oninput естественно не работает. Подскажите, как сделать так, чтобы событие отрабатывало и на уже заполненных ранее ячейках с количеством товара?

count = 1;
$(function () {
      
    $("#btnAdd").bind("click", function () {
        test = "weight" + count; 
        weight = "weights" + count;
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
        count++;        
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
    });
   
});
function GetDynamicTextBox(value) {
    
    return  "<td><select name='kombikorm[]' id='good" + count +"' class='form-control'><option>T1</option><option> T2</option><option> T3</option></select></td>" +
            "<td><input name = 'DynamicTextBox[]' type='text' value = '" + value + "' class='form-control' oninput='getWeight()' id='weight" + count +"' /></td>" +
            "<td class='weight-span'><span id='weights" + count +"'></span></td>" + 
            '<td><span></span></td>' + 
            '<td><span></span></td>' + 
            '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
    
}


function getWeight() {
    var x = document.getElementById(test).value;
    var z = x * 30;
    if(z >= 1000){
    document.getElementById(weight).innerHTML = (x * 30) / 1000 + " т.";
}else{
    document.getElementById(weight).innerHTML = x * 30 + " кг.";
}

  }

Answer 1

Ваша ошибка в том, что при каждом добавлении строки вы увеличиваете count, который потом используете в функции расчета для получения идентификатора элемента, таким образом всегда обращаетесь к последнему "#weights" + count.
Требуется же работать просто со текущей строкой и элементами в ней.

Описанная логика должна обрабатываться примерно следующим кодом

$("#add").click(function(){
   $("#tpl").clone()
            .attr('id', null)
            .appendTo("#wrapper");
});

$("#wrapper").on('input', '.q', function(){
   let v = +$(this).val();   
   $(this).closest('.row')
          .find('.v')
          .text( v*2 );
});

#tpl {
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add">Добавить строку</button>

<div id="wrapper">
</div>

<div id="tpl" class="row">  
  <input class="q"/>
  <span class="v">0</span>
</div>

(клонирование строки для примера, на практике иногда можно использовать, но скорее как быстрый пример)

БЛОГ НА HUSL

JQuery oniput динамическая таблица

Ответы (1 шт):