将 jquery.calculation.js 与动态添加的表单字段一起使用答案

【问题标题】：Using jquery.calculation.js with dynamically added form fields将 jquery.calculation.js 与动态添加的表单字段一起使用
【发布时间】：2012-02-12 22:23:31
【问题描述】：

我正在创建一个包含动态添加字段的表单，并希望汇总所有添加的字段。到目前为止，我有以下代码，但它只对第一行求和：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Totals</title>
    <script type="text/javascript" src="../js/jquery/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.calculation.js"></script>

    <script type="text/javascript">
    //Sum
    $(document).ready(
        function (){
            $('input[name^=reds]').sum("keyup", "#totalSumReds");
            $("input[name^=blues]").sum("keyup", "#totalSumBlues");
        }           
    );
    </script>

    <script type="text/javascript">
    //Add/remove form fields
    jQuery(function($){
        $('#btnAdd').click( function(){
            var num = $('.clonedInput').length;
            var newNum  = new Number(num + 1);
            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            newElem.children(':first').attr('id', 'name' + newNum).attr('reds', 'reds' + newNum);
            $('#input' + num).after(newElem);
            $('#btnDel').attr('disabled', false);
            if (newNum == 5)
                $('#btnAdd').attr('disabled', 'disabled');
        });

        $('#btnDel').click( function() {
            var num = $('.clonedInput').length;
            $('#input' + num).remove();
            $('#btnAdd').attr('disabled', false);
            if (num-1 == 1 )
                $('#btnDel').attr('disabled', 'disabled');
        });

        $('#btnDel').attr('disabled', 'disabled');
    });   
    </script>
</head>

<body>
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Numbers: <input type="text" name="reds"/>
        <input type="text" name="blues" id="blues"/>
    </div>
<div>
        Totals: <input type="text" name="totalSumReds" id="totalSumReds" value="" size="2" readonly="readonly" />
        <input type="text" name="totalSumBlues" id="totalSumBlues" value="" size="2" readonly="readonly" />

</div> 
    <div>
        <input type="button" id="btnAdd" value="add line" />
        <input type="button" id="btnDel" value="remove line" />
    </div>
</form>
</body>
</html>

关于我应该尝试解决什么问题有什么想法吗？谢谢！

【问题讨论】：

我认为你不应该那样使用它var newNum = new Number(num + 1);

标签： javascript forms jquery jquery-plugins

【解决方案1】：

在您的代码中，您仅在现有输入字段上注册求和函数，之后添加的任何字段都不会触发计算，并且在求和时也不会被考虑在内。

您可以改用事件委托：

<script type="text/javascript">
    // Sum
    $(function (){
        $('#myForm').live("keyup", "input[name^=reds]", function() {
            var sum = $('input[name^=reds]').sum();
            $('#totalSumReds').val(sum);
        });
        $('#myForm').live("keyup", "input[name^=blues]", function() {
            var sum = $('input[name^=blues]').sum();
            $('#totalSumBlues').val(sum);
        });
    });
</script>

【讨论】：