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

Question

我正在根据用户输入动态创建一个表(JSFiddle link)。我现在想总结表中的文本框。为此，我向所有输入框添加了一个公共(public)类，并向结果文本框添加了一个 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 准备就绪时绑定(bind)了 change 事件。但是您正在动态添加行(和 input 元素)。因此，新元素不会绑定(bind)事件。

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

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