对于动态创建的内容，Jquery不会添加总和

Question

我有一个表单，当我输入一个数字和"keyup“时，它应该显示总数。但是，只要表单是静态的，它就可以正常工作，但是如果是动态生成的，它就不能工作。

我已经添加了一个js小提琴链接，对我有任何帮助吗？

JSFiddle

<form class="order-form">
<div class="product-lines">
    <!-- Product Line Section -->
    <div class="product-line">  <a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png" /></a>

        <input class="input-text" name="product-code" type="text" placeholder="Product Code"></input>
        <input class="input-text" name="product-quantity" type="text" placeholder="Quantity"></input>
        <input class="input-text" name="product-discript" type="text" placeholder="Discription of Product" disabled></input>
        <label class="label-sign">&pound;</label>
        <input class="input-text" name="product-price" type="text" placeholder="RRP Price"></input>
        <br>
    </div>
</div>
<p>Line below dynamically generated</p>
<div class="product-lines">
    <!-- Product Line Section -->
    <div class="product-line">  <a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png" /></a>

        <input class="input-text" name="product-code" type="text" placeholder="Product Code"></input>
        <input class="input-text" name="product-quantity" type="text" placeholder="Quantity"></input>
        <input class="input-text" name="product-discript" type="text" placeholder="Discription of Product" disabled></input>
        <label class="label-sign">&pound;</label>
        <input class="input-text" name="product-price" type="text" placeholder="RRP Price"></input>
        <br>
    </div>
</div>
<br>
<div id="product-btn">
    <input name="btn-add-line" type="button" value="Add new line"></input>
    <input id="btn-update" name="btn-update" type="button" value="Update"></input>
    <!-- Clear All Button -->
    <input id="btn-removeAll" name="btn-removeAll" type="reset" value="Remove All"></input>
    <input name="btn-submit" type="submit" value="Submit Order"></input>
    <label class="label-sign">&pound;</label>
    <input class="input-text" name="order-total" type="text" placeholder="Order total" disabled></input>
</div>

​

我的代码

var productLines = $("div.product-lines"),
    productLine = $("div.product-line"),
    productPrice = $("input[name=product-price]"),
    productCode = $("input[name=product-code]"),
    productQuan = $("input[name=product-quantity]"),
    updateTotal = $("input#btn-update"),
    orderTotal = $("input[name=order-total]");



$(productLines).on("keyup", function (event) {

    var sum = 0;

    $(productPrice).each(function () {

        sum += Number($(this).val());

    });

    $(orderTotal).val(sum);


});

我是JS新手。

Answer 1

将事件委托给更高级别的元素。例如，如果您的form元素包装在section元素中，则可以改用：

$('section').on('keyup', 'div.product-lines', function(event) {
    ...
});

有关委派在jQuery中的工作方式的详细信息，请参阅Event Delegation documentation 。

此外，input元素也是自关闭的。<input ...></input>无效，应替换为<input ... />。

Answer 2

创建新行后，必须更新productPrice变量。

productPrice = $("input[name=product-price]")

Answer 3

要将事件绑定到动态插入的元素，请尝试：

$(document).on("keyup", "div.product-lines", function (event) {

此语法将事件侦听器绑定到文档本身，而$(productLines).on("keyup", function (event) {仅在触发该行代码时绑定到页面上当前存在的元素。