Onchange事件不適用於動態表格行

Question

如何輸出計數器變量以顯示每行的行數。 這是一個動態創建的錶行，所以我已經發布了JS是動態代碼：

   counter = $('#myTable tr').length; 
      var newRow = $("<tr>"); 
      var cols = ""; 
      cols += '<td row-id="' + counter + '"></td>'; 
      cols += '<td row-id="' + counter + '">Display row counter here</td>'; 
      cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="material_id_' + counter + '" readonly="true" name="material_id_' + counter + '" style="width:150px" required><span class="btn btn-default btn-sm input-group-addon search_material_modal" id="" onclick="displaymaterialmodal(' + counter + ')" ><span class="glyphicon glyphicon-eye-open" title="' + counter + ' "></span></span></div></td>'; 
      cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"></div></td>'; 
      cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="quantity" name="quantity" style="width:70px"></td>'; 
      cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="bar_code" name="bar_code" style="width:150px"></td>'; 
      cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="invoice_number" name="invoice_number" style="width:150px"></td>'; 
      cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="unit_price" name="unit_price" style="width:100px"></td>'; 
      cols += '<td row-id="' + counter + '"><select name="where_found" id="where_found" style="height:30px"><option value="" selected></option><option value="Retour client"><cfoutput>#textconstants.customer#</cfoutput></option><option value="Controle recption"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>'; 
      cols += '<td row-id="' + counter + '"><select name="shipment" id="shipment" style="height:30px" class="myInputbox"><option value="" selected></option><option value="Pallette"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="Container"><cfoutput>#textconstants.container#</cfoutput></option></select></td>'; 
      cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="remarks" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>'; 
      cols += '<td row-id="' + counter + '"><select name="rework" id="rework" style="height:30px" class="myInputbox"><option value="" selected></option><cfoutput><option value="#textconstants.no_rework#">#textconstants.no_rework#</option><option value="#textconstants.failed_rework#">#textconstants.failed_rework#</option><option value="#textconstants.rework_ok#">#textconstants.rework_ok#</option></cfoutput></select></td>'; 
      cols += '<td row-id="' + counter + '"><select name="status" id="status" style="height:30px" class="myInputbox"><cfoutput><option value="" selected></option><option value="#textconstants.credit_note#">#textconstants.credit_note#</option><option value="#textconstants.replacement#">#textconstants.replacement#</option><option value="#textconstants.no_action#">#textconstants.no_action#</option></cfoutput></select></td>'; 
      cols += '<td row-id="' + counter + '"><button type="button" class="btn btn-default btn-sm" onclick="addphotos(' + counter + ')"><span class="glyphicon glyphicon-camera"></span></button></td>'; 

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

任何想法，將不勝感激，有上得到這個輸出一記塊。

Answer 1

也只是看代碼，將呈現這樣的：

$(material_id_12) 

你有一個名爲material_id_12變量或者是你實際上是試圖用這個ID來引用的元素。

AKA，它或許應該像

$("#material_id_12") 

你在幾個地方與所有的選擇都有這個問題。

---

由於您使用jQuery，您probalby應該依賴於單個選擇器並罰款基於該行的值。沒有必要直接向每個元素添加事件。

$("#tableId tbody").on("change", ".classForTextbox", function(){ 
    var row = $(this).closest("tr"); 
    var tb1 = row.find("input.foo").val(); 
    var tb2 = row.find("input.bar").val(); 
    processMyData(tb1, tb2); 
});