Question

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

我的代码如下。

我的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>

Answer 1

问题似乎与新添加的元素有关。您可以使用jQuery on方法在这些元素上绑定keyup事件。此外，您不需要遍历元素并将keyup事件绑定在每个元素上，就像您已经完成的那样。您可以使用一个没有循环的语句来执行此操作，如下所示：

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

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

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

Answer 2

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

更改

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

到

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

点击查看实际操作： http://jsfiddle.net/ByLrz/1/

动态元素的总和

2 个答案: