0

我试图获得动态元素价值的实时总和，但我无法得到它。你可以在这里看到我的DEMO。

我的代码如下。

我的 Javascript 是：

<script>
    $(document).ready(function(){
        $(".input_ttotal").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;

        $(".input_ttotal").each(function() {       
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        $("#sum").html(sum.toFixed(2));
    }
</script>

最后，我的 HTML 是：

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="total" for="total">Total 1</label></td>
          </tr>
          <tr>
            <input class="input_ttotal" id="ttotal" type="text" name="ttotal[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>

     <p>Sum is:<span id="sum">0</span></p>
</div>

</form>
4

2 回答 2

2

问题似乎出在新添加的元素上。您可以使用 jQueryon方法keyup在这些元素上绑定事件。此外，您不需要keyup像您所做的那样遍历元素并在每个元素上绑定事件。你可以用一个没有循环的语句来做到这一点，如下所示：

$(document).on('keyup', '.input_ttotal', function() {
    calculateSum();
});

或者像下面评论中提到的 CORRUPT 一样：

$(document).on('keyup', '.input_ttotal', calculateSum);
于 2013-07-31T02:49:56.990 回答
1

keyup 仅适用于第一个元素。新输入没有绑定到它们的处理程序。而不是使用.each()在页面加载时绑定元素，使用.on()来处理那些也动态附加的元素。

改变

$(".input_ttotal").each(function() {
    $(this).keyup(function() {
        calculateSum();
    });
});

至

$("form").on('keyup', '.input_ttotal', function() {
    calculateSum();
});

点击查看它的实际效果：http: //jsfiddle.net/ByLrz/1/

于 2013-07-31T02:49:14.523 回答