Question

我正在从用户输入（JSFiddle link）动态创建表。我现在想总结一下表格中的文本框。为此，我在所有输入框中添加了一个公共类，并在结果文本框中添加了一个id。但是，当我在文本框中输入值时，onchange事件不会触发。我在这里缺少什么？

这是我的JQuery表生成代码和文本框值总和：

$(document).ready(function () {
    $('#amortTable').click(function () {
        //User will input number of payments
        var i = $('#numOfRows').val();
        var s2 = "<table><th>Month No.</th><th>Cash Outflow</th>"
        for (var j = 0; j < i; j++) {
            s2 += "<tr><td>" + (j + 1) + "</td><td><input type='text' class='payment' id='payment" + (j + 1) + "' /></td></tr>";
        }
        s2 += "<tr><td></td><td><input type='text' id='paymentSum' readonly='readonly' style='background-color:#C0C0C0' /></td></tr></table>";
        $('#amortizationTable').html(s2);
    });

    $('.payment').on("change", function () {
        var sum = 0;
        $(".payment").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        $('#paymentSum').val(sum);
    });    
});

提前致谢。

Answer 1

您应该使用：

$("#amortizationTable").on("change", ".payment", function () {
    // your code from above
});

应用于您的jsFiddle - http://jsfiddle.net/XeuB8/17/

注意我确实只改变了1行（已注释）并且似乎有效。

之所以这样，是因为在DOM准备就绪时绑定了change事件。但是您正在动态添加行（和input元素）。因此，新元素不会将事件绑定到它们。

我提供的代码通过将一个事件处理程序附加到table元素来解决这个问题。当任何内容在表中的任何位置触发change事件时，它会检查该元素是否具有payment类。如果是，则在其上下文中执行处理程序。否则，不会为change执行处理程序。

以下是on的jQuery文档中有关它的部分：http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

“.payment”的“更改”事件未触发。我建议将和逻辑放在点击处理程序中。

动态创建的文本框中的求和值

2 个答案: