捕获动态添加到 Jquery Datatables 表的输入字段上的更改事件答案

【问题标题】：Catch change event on input field dynamically added to Jquery Datatables table捕获动态添加到 Jquery Datatables 表的输入字段上的更改事件
【发布时间】：2013-04-19 23:20:21
【问题描述】：

我有一个 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 event doesn't work on dynamically generated elements 或其他许多不同...

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

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

【问题讨论】：

标签： jquery dom event-handling onchange

【解决方案1】：

~~question 的答案实际上是错误的。~~（他更新了答案！）您必须将事件绑定到父元素，因为 input 尚不存在按顺序排列将事件绑定到。

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

FIDDLE

【讨论】：

干得漂亮！

【解决方案2】：

你也可以使用$(document).on('input', '.maintCostField', function () {

【讨论】：