Jquery не работает после динамически добавленной строки

Question

Я новичок в JQuery, добавив динамическую c строку в мою таблицу html со следующим кодом

function addRow() {
  var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
  var rows = root.getElementsByTagName('tr');
  var clone = cloneEl(rows[rows.length - 1]);
  cleanUpInputs(clone);
  root.appendChild(clone);
}
function addColumn() {
  var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
    while (r = rows[i++]) {
      c = r.getElementsByTagName('td');
      clone = cloneEl(c[c.length - 1]);
      cleanUpInputs(clone);
      c[0].parentNode.appendChild(clone);
    }
}
function cloneEl(el) {
  var clo = el.cloneNode(true);
  return clo;
}

function cleanUpInputs(obj) {
  for (var i = 0; n = obj.childNodes[i]; ++i) {
    if (n.childNodes && n.tagName != 'INPUT') {
      cleanUpInputs(n);
    } else if (n.tagName == 'INPUT' && n.type == 'text') {
      n.value = '';
    }
  }  
}

Мой html выглядит следующим образом

<table id="mytab" class="table table-bordered payment_table">
                                    <thead class="bg-header">
                                        <tr>
                                            <th colspan="4">Bill Details</th>
                                        </tr>
                                    </thead>
                                    <tbody class="form-tbody">
                                        <tr>
                                            <th class="text-center">Quantity</th>
                                            <th class="text-center">Rate/Item</th>
                                            <th class="text-center">Total</th>  
                                            <th class="text-center">Description</th>                                            
                                        </tr>
                                        <tr>
                                            <td><input type="text" id="quantity" name="quantity" class="form-control"></td>
                                            <td><input type="text" id="rate" name="rate" class="form-control"></td>
                                            <td><input type="text" id="total" name="total" class="form-control"></td>
                                            <td><input type="text" id="desc" name="desc" class="form-control"></td>
                                        </tr>
                                    </tbody>
                                    <td><input type="button" class="btn btn-primary" value="Add" onclick="addRow()"></td>
                                </table>

Я делаю количество * Оценить / пункт = Итого, используя jquery следующую строку кода

$(document).ready(function(){
        $(document).on('keyup','#rate',function(){
            var rate = $("#rate").val();
            var quantity = $("#quantity").val();
            var total = rate*quantity;
            $('#total').val(total);
        });
    });

, она отлично работает для первой строки, но не работает для добавленных строк. Я пробовал "+" с моим идентификатором, но все равно это не сработало. Также поля ввода создаются с именем при динамическом добавлении. Как это сделать, чтобы сохранить данные на стороне сервера. Нужна помощь !!!

Answer 1

id элементы должны быть уникальными, когда вы клонируете tr, вы дублируете его внутреннюю структуру, поэтому необходимо будет определить id more dynamici c.

Одним из решений было бы объединить значение id с переменной и в момент клонирования tr увеличить значение этой переменной.

Примерно так: $("#quantity" + var++) в каждом "клоне" action ".

Надеюсь, это поможет.