jquery - How to find row wise total and grand total for dynamic rows using nested form?

itemprop="text">

I have used nested form. This is my
jquery code to find row wise total and grand total for invoice
application.

$("tr.sum_hours
            td").on("change", '.hr', function() {
 row =
            $(this).parent("td").parent();
 total = 0;
 qnt = 0;
 rate
            = 0;
 discount = 0;
 tax = 0;
 $(row).find("td
            input.hr").each(function(index) {
 if ($(this).val() !== "")
            {

 if ($(this).hasClass('quantity')){
 qnt =
            parseFloat($(this).val());
 }

            if($(this).hasClass('rate')){
 rate = parseFloat($(this).val());

            }
 if($(this).hasClass('discount')){
 discount =
            parseFloat($(this).val());
 }

            if($(this).hasClass('tax')){

 tax =
            parseFloat($(this).val());
 }
 return total =
            ((qnt*rate)-(discount)+(tax))
 }
 });
 $(row).find("td
            input.total").val(total);
 grand_total = 0;
 return
            $(".total").each(function() {
 if ($("#invoice_grand_total") !== "")
            {
 grand_total = grand_total +
            parseFloat($(this).val());

 }
 return
            $("#invoice_grand_total").val(grand_total);
 });

            });

and this is my
html code.

            class='item_details'>
 


            
 Item name

            Description
 Qty

            Rate
 Discount

            Tax
 Total

            Action
 


            
 


            
            id="invoice_item_details_attributes_0_item_name"
            name="invoice[item_details_attributes][0][item_name]" size="30" type="text"
            />
            id="invoice_item_details_attributes_0_description"
            name="invoice[item_details_attributes][0][description]" size="30" type="text"
            />
            id="invoice_item_details_attributes_0_quantity"
            name="invoice[item_details_attributes][0][quantity]" size="30" type="text"
            />
            id="invoice_item_details_attributes_0_rate"
            name="invoice[item_details_attributes][0][rate]" size="30" type="text"
            />
            id="invoice_item_details_attributes_0_discount"
            name="invoice[item_details_attributes][0][discount]" size="30" type="text"
            />
            id="invoice_item_details_attributes_0_tax"
            name="invoice[item_details_attributes][0][tax]" size="30" type="text"
            />


            disabled="disabled" id="invoice_item_details_attributes_0_total"
            name="invoice[item_details_attributes][0][total]" size="30" type="text"
            />
remove
 
             class='sum_hours'>
            id="invoice_item_details_attributes_1_item_name"
            name="invoice[item_details_attributes][1][item_name]" size="30" type="text"
            />
            id="invoice_item_details_attributes_1_description"
            name="invoice[item_details_attributes][1][description]" size="30" type="text"
            />
            id="invoice_item_details_attributes_1_quantity"
            name="invoice[item_details_attributes][1][quantity]" size="30" type="text"
            />
            id="invoice_item_details_attributes_1_rate"
            name="invoice[item_details_attributes][1][rate]" size="30" type="text"
            />
            id="invoice_item_details_attributes_1_discount"
            name="invoice[item_details_attributes][1][discount]" size="30" type="text"
            />

            id="invoice_item_details_attributes_1_tax"
            name="invoice[item_details_attributes][1][tax]" size="30" type="text"
            />

            disabled="disabled" id="invoice_item_details_attributes_1_total"
            name="invoice[item_details_attributes][1][total]" size="30" type="text"
            />
remove


            

this
code is working for static rows. But it is not working for the dynamically added
rows.

Please help.

class="post-text" itemprop="text">

class="normal">Answer

replace

$("tr.sum_hours
            td").on("change", '.hr', function()
            {

with
this

$("body").on("change",
            'tr.sum_hours td .hr', function()
            {

/>

i hope it will
work.

if you want more clarification see href="https://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call/17715336">jQuery
click function doesn't work after ajax
call?

a jsfiddle demo of want went
wrong http://jsfiddle.net/suhailvs/wjqjq/

jsfiddle
of your code after the above changes,visit href="http://jsfiddle.net/suhailvs/t67pn/1/" rel="nofollow
noreferrer">http://jsfiddle.net/suhailvs/t67pn/1/