添加新行时，jQuery代码不起作用

add new rows, jQuery code doesn't work

本文关键字：代码 不起作用 jQuery 新行时 添加      更新时间：2023-09-26

我有一个表格，只有一行和一个按钮。当单击一个按钮时，它会加载另一行。我有一个函数来做一些计算。然后，我需要显示total列中所有total值的总和。在添加一行之前，它可以正常工作。但添加新行后计算不工作。

我的代码在这里

<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>

经过几次修改后，您的代码运行良好，看看Working FIDDLE

  1. 用类替换ID(根据定义，ID在页面中必须是唯一的)，例如:

    <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中也用class代替:

    $("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. 要处理动态添加到DOM中的新tr，您必须替换这一行:

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

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

  4. 添加类txtMult到新的tr添加点击事件:

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

你的代码

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

将事件附加到元素内部已经存在的输入，具有txtMult类。以下代码将适用于任何新行内的任何新输入:

$("#boq_tbl").on("keyup", ".txtMult input", multInputs);
这样，您需要在处理程序附件上存在的唯一标记是具有boq-tbl id的标记，它提供上下文。
相关文章：