在输入字段上捕获更改事件,动态添加到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事件的任何不同都不适用于动态生成的元素或许多其他元素 ......

更新* 我将以下内容添加到数据表的fnDrawCallback事件中,现在它可以工作,只有它执行的次数与屏幕上的表单一样多.

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

Answer 1

这个问题的答案的问题其实是错误的.(他更新了答案!)您必须将事件绑定到父元素,因为input尚未存在以将事件绑定到.

$(document).on('change', '.maintCostField', function() { 

小提琴