Question

我有一张桌子，有一排和一个按钮。单击按钮时，它会加载另一行。我有一个功能来做一些计算。而且，我需要显示总列中所有总值的总和。在添加一行之前它工作正常。但在添加新行后，计算并不起作用。

我的代码在这里

<div class="inner-page-wrap has-no-sidebar clearfix">
    <div class="clearfix">
        <div class="page-content hfeed clearfix">
            <div class="clearfix post-14 page type-page status-publish hentry" id="14">
                <section id="section-1" data-rowname="" class="row fw-row spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height col-sm-12 section-1 col-window-height slide">
                    Part 1
                </section>
                <section id="section-2" data-rowname="" class="row fw-row spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height col-sm-12 section-2 col-window-height">
                    Part 2
                </section>
                <section id="section-3" data-rowname="" class="row fw-row spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height col-sm-12 section-3 col-window-height">
                    Part 3
                </section>
            </div>
        </div>
    </div>
</div>

添加

JS

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

Answer 1

您的

代码

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

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

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

这样，处理程序附件中唯一需要存在的标记是id为boq-tbl的标记，提供上下文。

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

1 个答案: