title: Onchange event not working on dynamic table row
body: <p>How do I output the counter variable so that it displays the row count for each row.
  This is on a dynamically created table row so the js I have posted is the dynamic code:</p>
  
  <pre><code>                counter = $('#myTable tr').length;
              var newRow = $("&lt;tr&gt;");
              var cols = "";
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;Display row counter here&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;div class="input-group"&gt;&lt;input type="text" class="form-control input-sm" id="material_id_' + counter + '" readonly="true" name="material_id_' + counter + '" style="width:150px" required&gt;&lt;span class="btn btn-default btn-sm input-group-addon search_material_modal" id="" onclick="displaymaterialmodal(' + counter + ')" &gt;&lt;span class="glyphicon glyphicon-eye-open" title="' + counter + ' "&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;div class="input-group"&gt;&lt;input type="text" class="form-control input-sm" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"&gt;&lt;/div&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;input type="text" class="form-control input-sm myInputbox" id="quantity" name="quantity" style="width:70px"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;input type="text" class="form-control input-sm myInputbox" id="bar_code" name="bar_code" style="width:150px"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;input type="text" class="form-control input-sm myInputbox" id="invoice_number" name="invoice_number" style="width:150px"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;input type="text" class="form-control input-sm myInputbox" id="unit_price" name="unit_price" style="width:100px"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;select name="where_found" id="where_found" style="height:30px"&gt;&lt;option value="" selected&gt;&lt;/option&gt;&lt;option value="Retour client"&gt;&lt;cfoutput&gt;#textconstants.customer#&lt;/cfoutput&gt;&lt;/option&gt;&lt;option value="Controle recption"&gt;&lt;cfoutput&gt;#textconstants.quality_control#&lt;/cfoutput&gt;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;select name="shipment" id="shipment" style="height:30px" class="myInputbox"&gt;&lt;option value="" selected&gt;&lt;/option&gt;&lt;option value="Pallette"&gt;&lt;cfoutput&gt;#textconstants.pallet#&lt;/cfoutput&gt;&lt;/option&gt;&lt;option value="Container"&gt;&lt;cfoutput&gt;#textconstants.container#&lt;/cfoutput&gt;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;input type="text" class="form-control input-sm myInputbox" id="remarks" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;select name="rework" id="rework" style="height:30px" class="myInputbox"&gt;&lt;option value="" selected&gt;&lt;/option&gt;&lt;cfoutput&gt;&lt;option value="#textconstants.no_rework#"&gt;#textconstants.no_rework#&lt;/option&gt;&lt;option value="#textconstants.failed_rework#"&gt;#textconstants.failed_rework#&lt;/option&gt;&lt;option value="#textconstants.rework_ok#"&gt;#textconstants.rework_ok#&lt;/option&gt;&lt;/cfoutput&gt;&lt;/select&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;select name="status" id="status" style="height:30px" class="myInputbox"&gt;&lt;cfoutput&gt;&lt;option value="" selected&gt;&lt;/option&gt;&lt;option value="#textconstants.credit_note#"&gt;#textconstants.credit_note#&lt;/option&gt;&lt;option value="#textconstants.replacement#"&gt;#textconstants.replacement#&lt;/option&gt;&lt;option value="#textconstants.no_action#"&gt;#textconstants.no_action#&lt;/option&gt;&lt;/cfoutput&gt;&lt;/select&gt;&lt;/td&gt;';
              cols += '&lt;td row-id="' + counter + '"&gt;&lt;button type="button" class="btn btn-default btn-sm" onclick="addphotos(' + counter + ')"&gt;&lt;span class="glyphicon glyphicon-camera"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;';
  
              newRow.append(cols);
              counter++;
              $("table.order-list").append(newRow);
              $('#url_total_rows').val(parseInt($('#url_total_rows').val(), 10) + 1);
  
  
          });
  
          $("#myTable tbody").on("change", ".myInputbox", function(){
              var row = $(this).closest("tr");
              var tb1 = row.find("input.quantity").val();
              console.log(tb1);
          });
  </code></pre>
  
  <p>Any ideas would be appreciated, having a mind block on getting this to output.</p>