title: Catch change event on input field dynamically added to Jquery Datatables table
body: <p>I have an ajax call that uses the following code to add some rows to a data table for each record in the response:</p>
  
  <pre><code>strAppName = data.Application_Name
  maintCost = '&lt;input class="maintCostField" appid="' + data.Application_ID + '" type="text" placeholder="$"&gt;';
  
  $('#myReport').dataTable().fnAddData([
      strAppName,
      maintCost,
      etc,
      etc
  ]);
  </code></pre>
  
  <p>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...</p>
  
  <pre><code>$(".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);
  });
  </code></pre>
  
  <p>(I know this one is deprecated)</p>
  
  <pre><code>$(".maintCostField").live('change',function () {
      val = $(this).val();
      app = $(this).attr('appid');
      alert('Updating app# ' + app + ' with ' + val);
  });
  </code></pre>
  
  <p>What am I doing wrong?  I don't see why it's any different than <a href="https://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements">Click event doesn&#39;t work on dynamically generated elements</a> or many others...</p>
  
  <p><strong>update*</strong>
  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.</p>
  
  <pre><code>$(".maintCostField").each(function () {
      this.addEventListener("change", function () {
          val = $(this).val();
          app = $(this).attr('appid');
          alert('Updating app# ' + app + ' with ' + val);
      }, true);
  });
  </code></pre>