Question

当我单击复选框以删除表格行时，我希望我的计算更新总计。我在类似情况下通过简单地将计算总和函数添加到删除行事件来完成此操作，但我似乎无法在这种情况下使其工作。

$(function () {
    // Append Invoice Line
    $(document).on('click', '#addnewitem', function () {
        var currentTable = $(this).closest('table').attr('id');
        $('#' + currentTable).append('<tr><td><div class="col-sm-6 col-lg-12"><input    type="Client Name" class="form-control" id="c_name" placeholder="Item"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="c_name" placeholder="Description"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="item_price" placeholder="Item Price"  name="item_price[]"></div></td><td><button type="button" id="removeItem" class="btn btn- default"><span class="glyphicon glyphicon-trash"></span></td></tr>');
    });

    //Remove Invoice Line
    $(document).on('click', '#removeItem', function () {
        calculateTotal();
    });

    // Sum Amt Collected    
    function calculateSum () {
        var sum = 0;
        var currentTable = $(this).closest('table').attr('id');
        $('#' + currentTable + ' input#item_price').each(function () {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
    //.toFixed() method will roundoff the final sum to 2 decimal places
        $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
    }

    $(document).on('keyup', 'input#item_price', calculateSum);
});

http://jsfiddle.net/swTs6/

Answer 1

我不知道这是否是问题，但在您发布的代码中，单击calculateSum时不会调用#removeitem函数。您正在调用calculateTotal，这是一个不存在的函数。

你的功能应该是这样的：

$(document).on('click', '#removeitem', function() {
    calculateSum();
});

作为旁注，您应该限制直接绑定到document对象的函数数量。 #removeitem是一个ID，因此只应该有一个带有该ID的项目。您应该将代码更改为如下所示，或者每次单击页面上的内容时都会触发单击事件：

$('#removeitem').on('click', calculateSum);

如果#removeitem应该在您的网页上出现多次，我建议您更改为课程而不是ID。 ID只应出现在页面上一次。类可以多次出现。要在类上使用委派事件，您可以绑定到最近的不变父元素。

$('#parent').on('click', '.removeitem', calculateSum);

Answer 2

$(document).on('click', '#removeItem', function () {
    calculateSum();
});

您需要在#removeItem点击而不是CalculateTotal（不存在）上调用CalculateSum。我已经测试了这段代码，它运行得很好。

<强>更新

除上述问题外，实际代码首先删除表行，然后使用$(this).closest('table').attr('id')查找未定义的表ID。

我已经在JsFiddle中解决了这个问题，更新了一个可以访问here。

删除输入字段更新

2 个答案: