0

我正在从用户输入（JSFiddle链接）动态创建一个表。我现在想总结表格中的文本框。为此，我为所有输入框添加了一个通用类，并为结果文本框添加了一个 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);
    });    
});

提前致谢。

4

2 回答 2

5

你应该使用：

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

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

请注意，我实际上只更改了 1 行（已注释），它似乎有效。

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

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

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

于 2013-04-02T13:56:09.110 回答
0

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

于 2013-04-02T13:59:52.767 回答