Question

I’my trying to sum up the values in text boxes and place the total sum in a span tag. I’ve got the functions working right (sort of…). My problem is the “KEYUP” event is not working on form elements that get added after the page loads.

For example, When the page renders it displays one INPUT box where the user can enter a number. There is an “add” link that will clone the that has the INPUT box, thus allowing the user to add as many elements they want. I’m using the class attribute to tie all the input boxes together so I can sum on them using jqueries .each().

Here’s what the code is doing. if I dynamically add 3 or for text boxes the keyup event only executes on the 1st INPUT box that was originally on the page when the page rendered…but when I type values into this box, the numbers in the dynamically created input boxes get summed up as they should. So, it’s sortof working, however I want the keyup event to be triggered from the dynamic input boxes as well.

I’m using jqueries “.after()” to add the elements to the dom.

Here’s the JQUERY code:

$(document).ready(function() {

//ADD INCOME TOTALS
$('.'income_txt\').each(function() {


$(this).keyup(function(){calculateSum('income_total', 'income_txt');});
}); //end income totals

}); //end document ready

Here’s the function that is stored in a .js file

//CALCULATESUM function
function calculateSum(ele, classname) 
{
    var sum = 0;
    //iterate through each textboxes and add the values
    $("."+classname).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    $("#"+ele).html(sum);

}

Here’s the HTML MARKUP:

<input class="income_txt" type="text" name="income_value1" id="' . $property_id . '_income_value_id1" />

Any thoughts on how to accomplish?

Thanks for the help.

Answer 1

When you clone the inputs, are you adding ‘true’ to the call? This will clone the events as well.

$('.myElement').clone(true);