Question

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

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

关于我应该尝试修复它的任何想法？谢谢！

Answer 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>

使用带有动态添加的表单字段的jquery.calculation.js

1 个答案: