Question

我正在尝试创建一个动态报价表单，用户可以根据需要添加任意数量的行。输入“reCal”类的输入字段后，我希望计算总价格字段。

<div class="orderItem">
<div class="row col2">
<input class="reCal nvo" id="iQty" name="item[1][qty]" placeholder="1" value="" />
</div><!--col2-->
<div class="row col3">
<input class="ctp reCal nvwdo currency" id="iPrice" name="item[1][price]" placeholder="100.00" value="" />
</div><!--col3-->
</div><!--orderItem-->

<div class="box">
<p>Net Total (£)</p>
<input class="noh" id="netTotal" name="netTotal" type="text" readonly="readonly" value="0" />
</div>

这是我目前拥有的jQuery。

$(document).ready(function(){

    $('.reCal').blur(function(){
        calculate();
    });

    function calculate(){
        var net = 0;
        $('.ctp').each(function(){
            net += parseInt($(this).val());
        });
        $('input#netTotal').val(net.toFixed(2));
    }
});

此代码确实正确计算总和，但模糊函数仅适用于第一个输入框，即使所有其他输入框具有相同的类。

我不知道我的问题是否可能源于使用.after（）命令来编写每个新行。只是一个理论。

Answer 1

尝试这种方式 -

$(document).on('blur','.reCal',function(){
        calculate();
});

Answer 2

尝试以下代码，

$(document).ready(function(){

    $('.reCal').live('blur',function(){
    calculate();
    })

    function calculate(){
        var net = 0;
        $('.ctp').each(function(){
            net += parseInt($(this).val());
        });
        $('input#netTotal').val(net.toFixed(2));
    }
});

jQuery模糊了多个字段的问题

2 个答案: