CODEWITHSUNDEEP
jqueryhtml-table
rolodex
rolodex

Reputation: 530

Add new row with jQuery, calculation function not executed

I have a table that has this function:

function subtotal(){
        var gt = 0;
        $('.itemlist tr').each(function (){
            $(this).find('.ttl span').html($('.qty', this).val() * $('.price span', this).text());
        });
        $('.ttl').each(function(){
            total += parseInt($(this).text(),10);
        });
        $('.subtotal').html(total);         
    }       
    $(".qty").keyup(subtotal);

But having added a new row with this function;

$(".addrow a").click(function(event){
        $(".itemlist").append('<tr><td><a href="#" class="delRow">x</a></td><td>000000</td><td><select class="fixed2"><option>---</option><option>Baju Kurung</option><option>Kebaya Pondan Shining</option></select></td><td><select class="fixed2"><option>---</option><option>Hijau</option><option>Purple</option></select></td><td>0</td><td><input type="number" class="qty" /></td><td class="price">RM<span>2.00</span></td><td class="ttl">0.00</td></tr>');
        event.preventDefault();
    });

The newly created row isn't functioning properly anymore.

Here's http://jsfiddle.net/RtCdG/3/

Help and feedback appreciated.

Upvotes: 0

Views: 554

Answers (3)

ikhsan
ikhsan

Reputation: 373

I have develop plugin to help building calculation form using jquery, try this if it help you reduce your headache

http://www.xsanisty.com/calx/

implementation sample that similar to your case can be found here

http://prototype.xsanisty.com/calx/sample/calx_with_dynamic_form.html

Upvotes: 1

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Here is the working code for you,

$(document).on('keyup', ".qty", function (e) {
    var total = 0;
    $(this).closest('tr').find('.ttl span').html($(this).closest('tr').find('.qty').val() * $(this).closest('tr').find('.price span').text());
    $('.ttl span').each(function () {            
        total += parseInt($(this).text(), 10);
    });
    $('.subtotal').html(total);
});

and your new insertinf html should have <td class="ttl">RM<span>0.00</span></td> instead of <td class="ttl">0.00</td>

http://jsfiddle.net/RtCdG/9/

Update,

As you request following are the reasons,

  1. To apply any event to dynamic content, you have to use jQuery .on() API
  2. You are calling.find('.ttl span').html() in your subtotal but there is no span inside the .ttl for new row.

Upvotes: 0

user1864610
user1864610

Reputation:

You've added the keyup handler to the existing rows. When you added the new row the keyup handler isn't added automatically.

You need to delegate the event from a container object with 

$("#container").on("keyup", function(){ 
    // do your keyup stuff here
 });

(#container is some DOM element - probably the containing <table>)

Done this way the keyup handler will operate on all rows you have now and any you add in the future.

Upvotes: 1

Related Questions