jquery - Jquery Datatables テーブルに動的に追加された入力フィールドの変更イベントをキャッチ

Question

次のコードを使用して、応答の各レコードのデータ テーブルにいくつかの行を追加する ajax 呼び出しがあります。

strAppName = data.Application_Name
maintCost = '<input class="maintCostField" appid="' + data.Application_ID + '" type="text" placeholder="$">';

$('#myReport').dataTable().fnAddData([
    strAppName,
    maintCost,
    etc,
    etc
]);

テキストボックスへの変更をキャッチするために次のセレクター/イベントを試しましたが、どれもトリガーしません。それらは document.ready セクションにあります...

$(".maintCostField").bind('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});


$(".maintCostField").on('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});

（私はこれが非推奨であることを知っています）

$(".maintCostField").live('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});

私は何を間違っていますか？動的に生成された要素や他の多くの要素で Click イベントが機能しないのとなぜ違うのかわかりません...

update* データテーブルの fnDrawCallback イベントに以下を追加したところ、機能するようになりました。画面上のフォームの数だけ実行されます。

$(".maintCostField").each(function () {
    this.addEventListener("change", function () {
        val = $(this).val();
        app = $(this).attr('appid');
        alert('Updating app# ' + app + ' with ' + val);
    }, true);
});