Javascript 使用jquery.calculation.js动态添加表单字段_Javascript_Forms_Jquery_Jquery Plugins

Javascript 使用jquery.calculation.js动态添加表单字段

javascript forms jquery jquery-plugins

Javascript 使用jquery.calculation.js动态添加表单字段,javascript,forms,jquery,jquery-plugins,Javascript,Forms,Jquery,Jquery Plugins,我正在创建一个具有动态添加字段的表单，并希望对所有添加的字段求和。到目前为止，我有以下代码，但它只对第一行进行求和： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Totals</title> <script type="text/javascript" src=".

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

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


总数
//总数
$（文件）。准备好了吗(
函数（）{
$（'input[name^=reds]'）。总和（“keyup”，“totalSumReds”）；
$（“input[name^=blues]”）和（“keyup”、“totalsumbues”）；
}           
);
//添加/删除表单字段
jQuery（函数（$）{
$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedInput'）.length；
var newNum=新的数字（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）；
如果（newNum==5）
$（'btnAdd'）.attr（'disabled'，'disabled'）；
});
$（'#btnDel'）。单击（函数（）{
var num=$（'.clonedInput'）.length；
$（'#输入'+num）.remove（）；
$（'btnAdd'）.attr（'disabled'，false）；
如果（num-1==1）
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
$（'btnDel'）.attr（'disabled'，'disabled'）；
});   
编号：
总数：

我该怎么解决这个问题？谢谢

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

您可以改为使用事件委派：

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


//总数
$（函数（）{
$（'#myForm'）.live（“键控”，“输入[name^=reds]”，函数（）{
var sum=$（'input[name^=reds]'）。sum（）；
$（'总和'）.val（总和）；
});
$（'#myForm'）.live（“键控”、“输入[name^=blues]”），function（）{
var sum=$（'input[name^=blues]'）。sum（）；
$（'totalsumbluses'）.val（总和）；
});
});

我认为您不应该这样使用

var newNum=newnumber（num+1）