0

我有一个具有此功能的表：

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/

帮助和反馈表示赞赏。

4

3 回答 3

1

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

您需要从容器对象委托事件 

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

（#container是一些 DOM 元素 - 可能是包含<table>）

通过这种方式，keyup处理程序将对您现在拥有的所有行以及将来添加的任何行进行操作。

于 2013-06-20T08:34:13.257 回答
1

我已经开发了插件来帮助使用 jquery 构建计算表单，如果它可以帮助你减轻头痛，试试这个

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

可以在此处找到与您的案例类似的实施示例

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

于 2013-06-21T06:25:33.533 回答
0

这是你的工作代码，

$(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，但新行span里面没有.ttl。
于 2013-06-20T08:53:51.267 回答