使用javascript动态添加只读输入框的总和

时间:2014-05-20 11:44:47

标签: javascript jquery html

我正在尝试计算所有输入框的总和'价值

<input class='total' type='number' name='total[]' readonly>

(这是readonly,其值也来自另一个javascript计算函数)。

我有jsFiddle

我使用以下javascript来汇总readonly输入框的所有值。它似乎不起作用。

var $form = $('#invEntry'),
    $sumDisplay = $('#totaldp');

$form.delegate('.total', 'change', function ()
{
    var $summands = $form.find('.total');
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

1 个答案:

答案 0 :(得分:1)

这是因为&#39;变化&#39;事件仅在用户更改文本框中的值时引发,而不是在DOM操作更改时引发。您可以通过更新总文本框来触发计算。

 $("#InputsWrapper").on('change', '.discount',function(){
     var tr = $(this).closest('tr');
     var quantity=tr.find(".qty").val();
     var percent=tr.find(".discount").val();
     var price=tr.find(".price").val();
     var tprice = price * quantity
     var discountpercent=percent / 100;
     var discountprice=(tprice * discountpercent );

     tr.find(".total").val(tprice - discountprice);
     calculateTotals()
});

function calculateTotals()
{
    var $summands = $('#invEntry').find('.total');
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $('#totaldp').val(sum);
}