onchange事件不适用于使用jQuery动态创建的表行元素

Question

我在jquery中具有onchange事件的写入功能。当我更改先前创建的元素中的数字字段值时，它起作用。但是当我更改动态创建的数字字段时，onchange函数不响应。我已经计算了onchange事件中数字字段的总和。当onchage事件响应先前创建的字段值更改时它会计算新创建的字段值。

我还编写了javascript函数，并使用onchange事件对其进行了调用。但这也没有起作用。

function calculateDebitCredit() {
        var debits = $('input[id*="debitAmount"]').map(function () {
            return this.value;
        }).get();

        var credits = $('input[id*="creditAmount"]').map(function () {
            return this.value;
        }).get();

        var totalCredit = credits.reduce(function(a,b){return Number(a)+Number(b);},0);
        var totalDebit = debits.reduce(function (a,b) {return Number(a)+Number(b);},0);
        $('#summaryTable').remove();
        $('#addDetailsButton').prepend('<table id="summaryTable" class="table"><tbody><tr id="summeryRow"><td colspan="3"></td><td>'+totalDebit+'</td><td id="debitAmount">'+totalCredit+'</td><td id="creditAmount"></td><td colspan="3"></td></tr></tbody></table>');
        console.log($('#showDetailsTable').html());
    }

    $('input[id*="debitAmount"]').on('change',function () {
        calculateDebitCredit();
    })

    $('input[id*="creditAmount"]').on('change',function () {
        calculateDebitCredit();
    })

我希望当我同时更改旧的和动态创建的数字字段时，更改事件应该起作用。