dom - Catch change event on input field dynamically added to Jquery Datatables table

Question

I have an ajax call that uses the following code to add some rows to a data table for each record in the response:

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

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

I've tried the following selectors/events to catch changes to the text box, but none of them trigger. They are in the document.ready section...

$(".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);
});

(I know this one is deprecated)

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

What am I doing wrong? I don't see why it's any different than Click event doesn't work on dynamically generated elements or many others...

update* I added the following to the fnDrawCallback event of the datatable and now it works, only it executes as many times as there are forms on the screen.

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

Answer 1

The answer to that question is actually wrong. (He updated the answer!) You have to bind the event to a parent element because the input doesn't exist yet in order to bind the event to.

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

FIDDLE