Javascript 使用jquery删除动态创建的行并绑定/更新现金总额

无法删除动态创建的行

.add row

将创建动态行，但

.delete

不会删除它。但是，初始的

.item行

将执行click事件并删除该行

单击事件似乎从未在添加的行上触发

    <form action="insert.php" id="testinsert" method="POST">
        <input type="submit" value="Submit" />
    </form> 
    <!--div class="font-effect-shadow-multiple">This is a font effect!<div-->
    <div id="page-wrap">

        <textarea id="header">INVOICE</textarea>

        <div id="identity">

            <div form ="testinsert" name="business-address" id="business-address">
            <span id="cmtext">Fix it Guy </span><br>
            43150 Your Drive<br>
            Potomac City, MD 20901<br>
            Phone: (301) 555-5580</div>

            <div id="logo">

              <div id="logoctr">
                <a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
                <a href="javascript:;" id="save-logo" title="Save changes">Save</a>
                |
                <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
                <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
              </div>

              <div id="logohelp">
                <input id="imageloc" type="text" size="50" value="" /><br />
                (max width: 540px, max height: 100px)
              </div>
              <img id="image" src="images/CM_LOGO.JPG" alt="logo" />
            </div>

        </div>

        <div style="clear:both"></div>

        <div id="customer">

            <div class="container">

                <div class="space"></div>
            <!--
            <textarea form ="testinsert" name="customer" id="customer-title">Customer Name</textarea>
            -->
                    <textarea form ="testinsert" name="address" id="address-title">Customer Invoices</textarea>
                    <textarea form ="testinsert" name="address1" id="address-one"></textarea>
            <!--
            <textarea form ="testinsert" name="address2" id="address-two">..</textarea>
            <textarea form ="testinsert" name="address3" id="address-three"></textarea>
            -->
            </div>

            <img src="http://www.jeffbarclay.com/invoice/images/green-plus.png" class="lookup-cust-plus" id="look"/>

            <table id="meta">
                <tr>
                    <td class="meta-head">Invoice #</td>
                    <td><textarea form ="testinsert" id="invoice_num" name="invoice">20170130</textarea></td>
                </tr>
                <tr>

                    <td form ="testinsert" name="date" class="meta-head">Date</td>
                    <td><textarea id="date">Janruary 30, 1960</textarea></td>
                </tr>
                <tr>
                    <td class="meta-head">Amount Due</td>
                    <td><div class="due">$0.00</div></td>
                </tr>

            </table>

        </div>

        <table id="items">

          <tr>
              <th>Item</th> <th>Description</th>    <th>Unit Cost</th>  <th>Quantity</th>   <th>Price</th>
          </tr>

          <tr class="item-row">
              <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]"></textarea>
              <a class="delete" href="javascript:;" title="Remove row">X</a>
              <a class="add-product" href="javascript:;" title="Add Product">A</a>
              </div></td>
              <td class="description"><textarea form ="testinsert" name="item_desc[]"></textarea></td>
              <td><textarea class="cost" form ="testinsert" name="item_cost[]"></textarea></td>
              <td><textarea class="qty" form ="testinsert" name="item_qty[]"></textarea></td>
              <td><span class="price" form ="testinsert" name="item_price[]"></span></td>
          </tr>

          <tr id="hiderow">
            <td colspan="5">

            <img src="http://www.jeffbarclay.com/invoice/images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>                  
            <img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice" class="add-invoice" title="Add Invoice"/>
            <img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="recall_product" class="recall-product" title="Recall Product"/>

            </td>
          </tr>

          <tr>
              <td colspan="2" class="blank"> </td>
              <td colspan="2" class="total-line">Subtotal</td>
              <td class="total-value"><div id="subtotal">$0.00</div></td>
          </tr>
          <tr>

              <td colspan="2" class="blank"> </td>
              <td colspan="2" class="total-line">Total</td>
              <td class="total-value"><div id="total">$0.00</div></td>
          </tr>
          <tr>
              <td colspan="2" class="blank"> </td>
              <td colspan="2" class="total-line">Amount Paid</td>
              <td class="total-value"><textarea id="paid">$0.00</textarea></td>
          </tr>
          <tr>
              <td colspan="2" class="blank"> </td>
              <td colspan="2" class="total-line balance">Balance Due</td>
              <td class="total-value balance"><div id="owed" class="due">$0.00</div></td>
          </tr>

        </table>

        <input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
        <input type="hidden" form ="testinsert" name="sales" id="sales"></input>
        <input type="hidden" form ="testinsert" name="owed" id="owed"></input> 
        <input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
        <input type="hidden" form ="testinsert" name="auto_num" id="auto_num"></input>  

        <div id="terms">
          <h5>Terms</h5>
          <textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
        </div>

    </div>

    <!--Contact Form -->
<div id="store_customer_div">
    <form class="form" action="insert_customer.php" id="contact" method="POST">
        <img src="images/button_cancel.png" class="img" id="cancel"/>
        <h3>Store Customers</h3>
        <hr/><br/>
        <label>Customer Name: <span>*</span></label>
        <br/>
        <input type="text" id="name" placeholder="Name" name="customer"/><br/>
        <br/>
        <label>Email: <span>*</span></label>
        <br/>
        <input type="text" id="email" placeholder="Email" name="email"/><br/>
        <br/>
        <label>Contact No: <span></span></label>
        <br/>
        <input type="text" id="contactno" placeholder="10 digit Mobile no." name="contact"/><br/>
        <br/>
        <label>Address 1: <span></span></label>
        <br/>
        <input type="text" id="address1" placeholder="address1" name="address1"/><br/>
        <br/>
        <label>Address 2: <span></span></label>
        <br/>
        <input type="text" id="address2" placeholder="address2" name="address2"/><br/>
        <br/>
        <label>Address 3: <span></span></label>
        <br/>
        <input type="text" id="address3" placeholder="address3" name="address3"/><br/>
        <br/>

        <input type="button" id="send" value="Store Customer"/><br/>
    </form>
</div>

<!--Product Form -->
<div id="store_product_div">
    <form class="form" action="insert_products.php" id="form_product" method="POST">
        <img src="images/button_cancel.png" class="img" id="p_cancel"/>
        <h3>Store Products</h3>
        <hr/><br/>
        <label>Product Name: <span>*</span></label>
        <br/>
        <input type="text" id="p_name" placeholder="Product Name" name="product"/>
        <br/>
        <label>Rate: <span>*</span></label>
        <br/>
        <input type="text" id="p_rate" placeholder="Sales Price $" name="rate"/><br/>
        <br/>
        <label>Cost: <span>*</span></label>
        <br/>
        <input type="text" id="p_cost" placeholder="Cost" name="cost"/><br/>
        <br/>
        <label>Taxable: <span>*</span></label>
        <br/>
        <input type="text" id="p_tax" placeholder="Taxable" name="taxable"/><br/>
        <br/>
        <label>Description: <span>*</span></label>
        <br/>
        <input type="text" id="p_desc" placeholder="Description" name="desc"/><br/>
        <br/>

        <input type="submit" id="send" value="Store Product"/><br/>
    </form>
</div>

<div id="customer_div">
    <form class="form" action="customer_fill.php" id="contact" method="GET">
        <img src="images/button_cancel.png" class="img" id="cancel"/>
        <h2>Customer List</h2>
        <ul id="dropdown" name="ddname"></ul>
    </form>         
</div>

<div id="product_div">
    <form class="form" action="product_fill.php?action=fill" id="contact" method="GET">
        <img src="images/button_cancel.png" class="img" id="cancel"/>
        <h2>Product List</h2>
        <ul id="ddproduct" name="ddproductname"></ul>
    </form>            
</div>

<div id="invoice_div">
    <form class="form" action="invoice_fill.php" id="contact" method="GET">
        <img src="images/button_cancel.png" class="img" id="cancel"/>
        <h2>Invoice List</h2>
        <ul id="ddinvoice" name="ddinvoicename"></ul>
    </form>            
</div>

发票
修理它，伙计

43150您的驱动器

马里兰州波托马克市20901

电话：（301）555-5580
|


（最大宽度：540像素，最大高度：100像素）
客户发票
发票#
20170130
日期
1960年1月30日
应付金额
$0.00
项目说明单位成本数量价格
小计
$0.00
全部的
$0.00
已付金额
$0.00
尚欠余额
$0.00
条款
净30天。30天后，未付余额将收取1.5%的财务费用。
商店顾客


客户名称：*






电邮：*






联络电话:






地址1：






地址2：






地址3：








存储产品


产品名称：*




费率：*






费用：*






应纳税：*






说明：*








客户名单

产品清单

发票清单

JS:

见：

$（.delete”）。在（'click'，function（）上{
$（this）.parents（'.item行'）.remove（）；
更新_total（）；
如果（$（“.delete”）.length<2）$（.delete”）.hide（）；
});

您必须使用文档选择器来选择动态创建的元素

$(document).on('click','.delete',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});

$（文档）。在（'click'，'delete'，function（）上{
$（this）.parents（'.item行'）.remove（）；
更新_total（）；
如果（$（“.delete”）.length<2）$（.delete”）.hide（）；
});

我在你的小提琴上测试过。它很好用。答案用完整的代码编辑完成了，谢谢，关于更新新创建的动态行的总计有什么想法吗？我不明白。如何更新动态生成行中的字段（即其他两个字段的总和），以便在呈现元素时显示结果

$(document).on('click','.delete',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});