Catch change event on input field dynamically added to Jquery Datatables table
dom, event-handling, jquery, onchange
Solution
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
Problem
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); }); ```