Question

I’ve a list of inputs that are loaded some at document ready and others are loaded dynamically. I need to sum all of them because I need to check that all of them doesn’t sums more than 99.

The problem is that with .live() I can’t get it working but it works with .change().

/* this works */
$(".percentage").each(function() {
    $(this).change(function() {
        var sum = 0;
        $(".percentage").each(function() {
            sum += $(this).val();
        });
        alert(sum);
    });
});

/* this don't */
$(".percentage").each(function() {
    $(this).live("change keyup focus click keydown", function() {
        var sum = 0;
        $(".percentage").each(function() {
            sum += $(this).val();
        });
        alert(sum);
    });
});

Thank you in advance!

Answer 1

You seem to be misunderstanding how live works. live() attaches a handler to all current, and future elements in the DOM that match the given selector. What you’re doing is that for each element currently in the DOM with a class of “percentage”, you’re binding an event to all current a future elements with the class of “percentage”, so each element’s ending with numerous events bound to it.

Try:

$('.percentage').live('change keyup focus click keydown', function() {
    var sum = 0;

    $(".percentage").each(function() {
        sum += $(this).val();
    });

    alert(sum);
});

Furthermore, val() will return a string, so you’ll have to do:

$(".percentage").each(function() {
    sum += parseInt($(this).val(), 10);
});