question 实际上是错误的。（他更新了答案！）您必须将事件绑定到父元素，因为 $ @ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $

  $（document）.on（'change'，'.maintCostField'，function（）{
 

FIDDLE

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);
});

and of course this didn't work

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

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