добавить новые строки, код jQuery не работает

Question

У меня есть таблица и одна строка и одна кнопка. При нажатии кнопки он загружает другую строку. и у меня есть функция для выполнения некоторых вычислений. И мне нужно показать сумму всех общих значений в общем столбце. перед добавлением строки он отлично работает. Но после добавления новой строки вычисления не работают.

мой код здесь

<table class="table" id="boq_tbl"> 
     <thead> 

      <th>Work Product Id</th> 
      <th>Cost Code</th> 
      <th>Work Item Description</th> 
      <th>Quentity</th> 
      <th>Unit</th> 
      <th>Laboure-Hrs</th> 
      <th>Labour Cost</th> 
      <th>Others</th> 
      <th>Total</th> 

     <thead> 

      <tbody> 
    <tr class="txtMult"> 

     <td><input type="text" name="work_product_id" class="form-control" id="work_product_id" placeholder=""></td> 
     <td><input type="text" name="cost_code" class="form-control" id="cost_code" placeholder=""></td> 
     <td><input type="text" name="work_item_description" class="form-control" id="work_item_description" placeholder=""></td> 
     <td><input type="text" name="quentity" id="val1" class="form-control" /></td> 
     <td><input type="text" name="unit" id="val2" class="form-control"/></td> 
     <td><input type="text" name="laboure_hrs" id="val3" class="form-control" /></td> 
     <td><input type="text"name="laboure_cost" id="val4" class="form-control"/></td> 
     <td><input type="text" name="others" class="form-control" id="others" placeholder=""></td> 


     <td> 
       <span class="multTotal">0.00</span> 
     </td> 
    </tr> 

    </tbody> 
     </table> 
<p align="right"> 
    Grand Total# <span id="grandTotal">0.00</span> 
</p> 

Добавить

JS

<script> 
$("#insert-more").click(function() { 
    $("#boq_tbl").each(function() { 
     var tds = '<tr>'; 
     jQuery.each($('tr:last td', this), function() { 
      tds += '<td>' + $(this).html() + '</td>'; 
     }); 
     tds += '</tr>'; 
     if ($('tbody', this).length > 0) { 
      $('tbody', this).append(tds); 
     } else { 
      $(this).append(tds); 
     } 
    }); 
}); 

</script> 


<script> 

$(document).ready(function() { 
     $(".txtMult input").keyup(multInputs); 

     function multInputs() { 
      var mult = 0; 
      // for each row: 
      $("tr.txtMult").each(function() { 
       // get the values from this row: 
       var $val1 = $('#val1', this).val(); 
       var $val2 = $('#val2', this).val(); 
       var $val3 = $('#val3', this).val(); 
       var $val4 = $('#val4', this).val(); 
       var $total = ($val1 * $val2) + ($val3 * $val4); 
       $('.multTotal',this).text($total); 
       mult += $total; 
      }); 
      $("#grandTotal").text(mult); 
     } 
    }); 




</script> 

Answer 1

Ваш код отлично работает после нескольких изменений, посмотрите на Working FIDDLE.

1. Заменить идентификаторы класса (идентификаторы должны быть уникальными на странице по определению), например:

   <td><input type="text" name="quentity" class="form-control val1" /></td> 
   <td><input type="text" name="unit" class="form-control val2"/></td> 
   <td><input type="text" name="laboure_hrs" class="form-control val3" /></td> 
   <td><input type="text" name="laboure_cost" class="form-control val4"/></td> 
   

2. Заменить их также класс в JavaScript:

   $("tr.txtMult").each(function() { 
        // get the values from this row: 
        var $val1 = $('.val1', this).val(); 
        var $val2 = $('.val2', this).val(); 
        var $val3 = $('.val3', this).val(); 
        var $val4 = $('.val4', this).val(); 
        var $total = ($val1 * $val2) + ($val3 * $val4); 
        $('.multTotal',this).text($total); 
        mult += $total; 
   }); 
   

3. Для сделку со свежим tr с добавлением dynamiclly к DOM Вы должны заменить эту строку:

   $(".txtMult input").keyup(multInputs); 
   

   By:

   $("#boq_tbl").on("keyup", ".txtMult input", multInputs); 
   

4. Добавить класс txtMult к новому tr добавлены на событие щелчка:

   var tds = '<tr class="txtMult">'; 
   

Answer 2

Ваш код

$(".txtMult input").keyup(multInputs); 

присоединяет событие к уже существующим входам внутри элементов, имеющих класс txtMult. Следующий код будет работать для любых новых входов, в любой новой строке:

$("#boq_tbl").on("keyup", ".txtMult input", multInputs); 

Таким образом, единственный тегом вы должны существовать при приложении обработчика является тегом, имеющим идентификатор boq-tbl, обеспечивая контекст.