表单字段值的总和在 jquery 添加的字段中不起作用

Question

我有一个表格，它可以很好地在第一行添加值， 但它会在单击“添加更多”按钮时停止在第二行添加值。 其次，当我在 处使用方括号获取其在数组中的值时，它也不会添加。

    <div class="my-form">
    <form name="form" >
    <p class="text-box">

     <input type="text" name="size[]" class="add" value="" id="box1"/>  
      <input type="text" name="qty[]"  class="add"   value="" id="box2"/> 

     Total:   <input name="sum" class="total" value=""/>


            <a class="add-box" href="#">Add More</a>
                </p>
                <p><input type="submit" value="Submit" /></p>
    </form>
    </div>

    <!-- **** Script to Add More fields **** -->
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.my-form .add-box').click(function(){
            var n = $('.text-box').length + 1;
            if( 10 < n ) {
                alert('Stop it!');
                return false;
            }
            var box_html = $('<p class="text-box"> <input type="text" name="size[]" class="add" value="" id="box1' + n + '" /> <input type="text" name="qty[]" class="add" value="" id="box2' + n + '" /> Total: <input name="sum" class="total" value=""/> <a href="#" class="remove-box">Remove</a></p>');
            jQuery('#my-form').append(box_html);
            box_html.hide();
            $('.my-form p.text-box:last').after(box_html);
            box_html.fadeIn('slow');
            return false;
        });

        $('.my-form').on('click', '.remove-box', function(){
            $(this).parent().css( 'background-color', '#FF6C6C' );
            $(this).parent().fadeOut("slow", function() {
                $(this).remove();
                $('.box-number').each(function(index){
                    $(this).text( index + 1 );
                });
            });
            return false;
        });
    });
    </script>

    <!-- **** Script to Sum field Values **** -->
    <script type="text/javascript">
    $.fn.sumValues = function() {
        var sum = 0; 
        this.each(function() {
            if ( $(this).is(':input') ) {
                var val = $(this).val();
            } else {
                var val = $(this).text();
            }
    document.form.sum.value = sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
        });
        return sum;
    };

    $(document).ready(function() {
        $('input.add').bind('keyup', function() {
            $('span.total').html( $('input.add').sumValues() );
        });
    });
    </script>

工作示例可以在这里看到 - Click here!

非常感谢任何帮助。

Answer 1

问题：在点击“添加更多”按钮时停止在第二行添加值

解决方案：使用事件委托，您可以将函数绑定到动态元素中。

$(document).ready(function() {
    $('form').bind('keyup', 'input.add', function() {
        $(this).parent().find('span.total').html($(this).parent().find('input.add').sumValues());
    }); 
});

问题：我使用方括号时不要添加

解决方案：不能只在代码的每一行添加回车，如果要使用单独的行，则需要在每一行的末尾添加\..

var box_html = $('<p class="text-box"> <input type="text" name="size[]" class="add" value="" id="box1' + n + '" /> \
<input type="text" name="qty[]" class="add" value="" id="box2' + n + '" /> \
Total: <input name="sum[]" class="total" value=""/> \
<a href="#" class="remove-box">Remove</a></p>');

Answer 2

I have created the fiddle for the same. 
Please check this, may help you.

http://jsfiddle.net/sandeep_pal/Ma5dK/