在row.find jquery函数上未定义

当我更新数量输入框时，为什么我的console.log输出中会得到一个未定义的？我尝试了各种方法，但无法返回在输入框中输入的值。

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="myInputbox form-control input-sm" 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);
});

感谢您的帮助。