用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/

更新，

照你的意见以下是原因，

1. 应用任何事件的动态内容，你必须使用jQuery .on() API
2. 要调用.find('.ttl span').html()在subtotal但在.ttl为新行内部没有span。

Answer 2

您已将keyup处理程序添加到现有行。当您添加新行时，keyup处理程序不会自动添加。

你需要从一个容器对象与

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

委托的事件（#container是一些DOM元素 - 可能含有<table>）

完成这样的keyup处理程序将在所有行您操作现在和将来添加任何你。

Answer 3

我开发的插件来帮助使用jQuery构建的计算形式，试试这个，如果它帮助你减少你的头痛

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

实施样本相似，以你的情况可以在这里找到

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