Добавить новую строку с jQuery, функция вычисления не выполнена

Question

У меня есть таблица, которая имеет эту функцию;

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); 

Но с добавлением новой строки с этой функцией;

$(".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(); 
    }); 

Созданная строка больше не функционирует должным образом.

Вот http://jsfiddle.net/RtCdG/3/

Помощь и обратная связь оценена. Спасибо!

Answer 1

Вот рабочий код для вас,

$(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); 
}); 

и ваш новый insertinf HTML должен иметь <td class="ttl">RM<span>0.00</span></td> вместо <td class="ttl">0.00</td>

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

Update,

Как запрашивать следующие причины,

1. Чтобы применить какое-либо событие для динамического контента, вы должны использовать JQuery .on() API
2. Вы звоните .find('.ttl span').html() в вашем subtotal но нет span внутри .ttl для новой строки.

Answer 2

Вы добавили обработчик keyup к существующим строкам. Когда вы добавили новую строку, обработчик keyup не добавляется автоматически.

Вам необходимо делегировать событие из объекта контейнера с

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

(#container некоторый DOM элемент - вероятно, содержащий <table>)

Done этим способом keyup обработчика будет работать на все строки, есть теперь и все, что вы добавите в будущем.

Answer 3

У меня есть разработать плагин, чтобы помочь строить форму расчета с помощью JQuery, попробуйте это, если это поможет вам уменьшить головную боль

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

пример реализации, который похож на ваш случай можно найти здесь

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