Событие изменения привязки в поле ввода, динамически добавленное в таблицу JQuery Datatables

У меня есть вызов 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);
});

Ответ 1

Ответ на этот вопрос на самом деле неправильный. (Он обновил ответ!) Вы должны связать событие с родительским элементом, потому что input еще не существует, чтобы связать событие с.

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

FIDDLE

Ответ 2

Вы также можете использовать $(document).on('input', '.maintCostField', function () {