jQuery：如何使用点击和更改功能更改输出？

Question

I have a form where I have a group of fields that can be added and removed. One of these fields contains a set of numbers that are added to produce a sum. You can see an example of this here: http://jsfiddle.net/beehive/HGJck/

Here's my problem: the sum does not change when I select a different number value when the form first loads, and there is only one group of fields (nothing added). It only changes after I've added or removed fields. How can I fix this?

$(document).ready(function() {
/* Add & Remove */
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
    $('div.container:last').after($('div.container:first').clone());
    $('div.container:last').append(removeButton);

    /* Sum */
    $(".number").change(function() {
        var combined = -10;
        $(".number").each(function() {
            combined += parseInt(this.value);
        });
        $("#sum").html(combined);
    }).trigger("change"); 

    return false;

});

$('#remove').live('click', function() {
    $(this).closest('div.container').remove();
});

});​

Answer 1

I moved the sum calculation into its own function and set combined to 0 instead of -10: jsFiddle example

/* Add & Remove */
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
    $('div.container:last').after($('div.container:first').clone());
    $('div.container:last').append(removeButton);
    sum();
    return false;
});

$('#remove').live('click', function() {
    $(this).closest('div.container').remove();
    sum();
});

function sum() {
    /* Sum */
    $(".number").change(function() {
        var combined = 0;
        $(".number").each(function() {
            combined += parseInt(this.value);
        });
        $("#sum").html(combined);
    }).trigger("change");
}​