删除输入字段更新答案

【问题标题】：Remove input field update删除输入字段更新
【发布时间】：2013-12-09 18:05:31
【问题描述】：

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

$(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/

【问题讨论】：

你可以为此制作 jsfiddle 吗？或者给演示页面？
能否提供一些 HTML 代码示例？

标签： jquery css invoice

【解决方案1】：

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

您的函数应该如下所示：

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

附带说明，您应该限制直接绑定到document 对象的函数数量。 #removeitem 是一个 ID，因此应该只有 1 个项目具有该 ID。您应该将代码更改为如下所示，否则每次单击页面上的某些内容时都会触发 click 事件：

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

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

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

【讨论】：

【解决方案2】：

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

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

更新：

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

我已经在 JsFiddle 中修复了这个问题，更新的可以访问here。

【讨论】：