Question

我需要jQuery总结一下来自jQuery的#totalpprice append。一旦附加/添加到oi id =“addhereform”

，它似乎无法工作

    <form method="get" action="here" onsubmit="">
        <input type="text" id="pname" name="pname" value="Product Name"/>
        <input type="number" id="pqty" name="pqty" value="3"/>
        <input type="text" id="pprice" name="pprice" value="2.80"/>
        <input type="text" id="totalpprice" name="totalpprice" value="" readonly/>
        <input type="button" id="padd" name="padd" value="add"/>
    </form>

<ol id="addhereform">
<li></li>
</ol>

var sumpprice = $('#pprice').val();
$('#pqty').change(function(){
    var sumpqty = $(this).val();
    var sumtotal = (sumpprice * sumpqty).toFixed(2);
    $('#totalpprice').val( sumtotal );
})
.change();

$('#padd').click(function(){
    var pname = $('#pname').val();
    var pqty = $('#pqty').val();
    var pprice = $('#pprice').val();
    var totalpprice = (pqty * pprice).toFixed(2);
    $('#addhereform li:last').append('<input type="text" id="pname" name="pname" value="' + pname + '"/><input type="number" id="pqty" name="pqty" value="' + pqty + '"/><input type="text" id="pprice" name="pprice" value="' + pprice + '"/><input type="text" id="totalpprice" name="totalpprice" value="' + totalpprice + '"/></li><li>');
});

现场演示 - ＆gt; http://jsfiddle.net/koto/cTWCq/

Answer 1

因为您要动态添加元素，所以需要使用.on()而不是.change()来绑定事件处理程序。您还需要更改逻辑，以便找到兄弟单元格来执行计算...

$(document).on('change', '#pqty', function(){
    var $this = $(this);
    var sumpprice = $this.siblings('#pprice').val();
    var sumpqty = $this.val();
    var sumtotal = (sumpprice * sumpqty).toFixed(2);
    $this.siblings('#totalpprice').val( sumtotal );
});

JSFiddle：http://jsfiddle.net/cTWCq/2/

您还在向页面添加重复的ID。考虑使用唯一ID并在选择器中使用类。

jquery计算输入函数中的值

1 个答案: