Question

I have some code which calculates the totals of the input in a row and then adds to a to grand total at the end, this is currently working code below:

$(":text[name='qty[]'],:text[name='rate[]']").keyup(function()
{
    var totalamount = 0.00;
    $("ul.rowData").each(function()
    {
        var quantity = +$(this).find(":text[name='qty[]']").val() || 0;
        var rate = +$(this).find(":text[name='rate[]']").val() || 0;
        var subtotal = quantity * rate;
        $(this).find(":text[name='price[]']").val(subtotal.toFixed(2));
        totalamount += subtotal;
    });
    $("#totalprice").val(totalamount.toFixed(2));
});

Now I then have an add row button which adds a row of fields:

$('.mainForm').find('.addItem').click(function()
{
    $('.invoiceItems').append('<ul class="rowData">' +
    '<li class="txtLg"><span class="sep">Item:</span><input type="text" name="item[]" maxlength="255" value=""></li>' +
    '<li class="txtLg"><span class="sep">Description:</span><input type="text" name="description[]" maxlength="255" value=""></li>' +
    '<li class="txtSm"><span class="sep">Rate:</span><input type="text" name="rate[]" maxlength="10" value="0.00"></li>' +
    '<li class="txtSm"><span class="sep">Qty:</span><input type="text" name="qty[]" maxlength="5" value="1"></li>' +
    '<li class="txtSm"><span class="sep">Price:</span><input type="text" name="price[]" maxlength="10" value="0.00"><input type="hidden" name="itemid[]" value="0"></li>' +
    '</ul>').fadeIn(500);
    return false;
});

My question is once I click add row the totals in the fields do not get automatically calculated when you add numbers to them. Any ideas why?

Answer 1

your bind $().keyup(function(){}} is not working with dynamically added to the page elements

$(":text[name='qty[]'],:text[name='rate[]']").live('keyup',function(){
   ...
}