我有一个表，用户可以在其中使用 jquery 添加行。这在某种程度上都很好。我遇到的问题是动态创建的行有一个带有 onclick 事件的按钮，该事件打开一个模态屏幕，其中的值被传递到模态屏幕。问题是我似乎无法让 jquery 选择器工作以返回值。选择器是：$（"#defect1_' + 计数器 + '"）.val（），这是错误的。这在静态行中有效，但在 JS 动态创建的行中失败。任何提供帮助将不胜感激。
更新 具有点击事件的完整添加行功能：.JS：
$(".addrow").click(function(){
counter = $('#myTable tr').length;
var newRow = $("<tr>");
var cols = "";
var hash = "#";
cols += '<td row-id="' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" readonly="true" value="' + counter + '" id="row_id" class="form-control input-sm txtRowId"><input type="hidden" class="txtDefect1Selection" id="defect1Selection_' + counter + '" name="defect1Selection_' + counter + '"><input type="hidden" class="txtDefect2Selection" id="defect2Selection_' + counter + '" name="defect2Selection_' + counter + '"><input type="hidden" class="txtPh1" id="Ph1_' + counter + '" name="Ph1_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm txtMaterial" id="material_id_' + counter + '" name="material_id_' + counter + '" style="width:150px" required></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm txtDescription" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"><input type="hidden" readonly="true" class="txtPlant" id="plant_' + counter + '" name="plant_' + counter + '"><input type="hidden" readonly="true" class="form-control input-sm txtHierarchy" id="hierarchy_' + counter + '" name="hierarchy_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="quantity_' + counter + '" name="quantity_' + counter + '" style="width:70px"><input type="hidden" value="quantity" id="quantityfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="bar_code_' + counter + '" name="bar_code_' + counter + '" style="width:150px"><input type="hidden" value="bar_code" id="barcodefixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="invoice_number_' + counter + '" name="invoice_number_' + counter + '" style="width:150px"><input type="hidden" value="invoice_number" id="invoicenumberfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="defect1_' + counter + '" name="defect1_' + counter + '" style="width:150px" readonly="true"><span class="btn btn-default btn-sm input-group-addon" id="defectsmodal1" onclick="openDefectsModal(' + counter + ',$('#defect1_' + counter).val(),$('#defect1Selection_' + counter).val(),$('#Ph1_' + counter).val(),$('#claim_id').val(),1);"><span class="glyphicon glyphicon-eye-open"></span></span></div></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="defect2_' + counter + '" name="defect2_' + counter + '" style="width:150px" readonly="true"><span class="btn btn-default btn-sm input-group-addon" id="defectsmodal2" onclick="openDefectsModal(' + counter + ',$('#defect2_' + counter).val(),$('#defect2Selection_' + counter).val(),$('#Ph1_' + counter).val(),$('#claim_id').val(),2);"><span class="glyphicon glyphicon-eye-open"></span></span></div></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="where_found" id="where_foundfixed_' + counter + '"><select name="where_found_' + counter + '" id="where_found_' + counter + '" style="height:30px" <option value="" selected></option><option value="1"><cfoutput>#textconstants.customer#</cfoutput></option><option value="2"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="shipment" id="shipmentfixed_' + counter + '"><select name="shipment_' + counter + '" id="shipment_' + counter + '" style="height:30px"><option value="" selected></option><option value="1"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="2"><cfoutput>#textconstants.post#</cfoutput></option><option value="3"><cfoutput>#textconstants.container#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="remarks_' + counter + '" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="rework" id="reworkfixed_' + counter + '"><select name="rework_' + counter + '" id="rework_' + counter + '" style="height:30px"><option value="" selected></option><cfoutput><option value="1">#textconstants.no_rework#</option><option value="2">#textconstants.failed_rework#</option><option value="3">#textconstants.rework_ok#</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-picture"></span></button></td>';
cols += '<td row-id="' + counter + '"><select name="product_installed_' + counter + '" id="product_installed_' + counter + '" style="height:30px; width:120px"></option><option value="TRUE"><cfoutput>#textconstants.yes#</cfoutput></option><option selected value="FALSE"><cfoutput>#textconstants.no#</cfoutput></option></select><input type="hidden" value="product_installed" id="productinstalledfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><select name="request_' + counter + '" id="request_' + counter + '" style="height:30px; width:120px"><option value="" selected></option><option value="1"><cfoutput>#textconstants.credit_note#</cfoutput></option><option value="2"><cfoutput>#textconstants.replacement#</cfoutput></option><option value="3"><cfoutput>#textconstants.no_action#</cfoutput></option></select><input type="hidden" value="request" id="requestfixed_' + counter + '"></td>';
newRow.append(cols);
counter++;
$("table.order-list").append(newRow);
});
添加新的动态内容并尝试访问它或其值时，应在动态内容的选择器中包含包含动态生成内容的静态父级的名称。尝试使用表作为静态父级。例：
$("table #defect1_" + counter).val()
根据问题新文本更新了答案：
$(".addrow").click(function(){
console.log('a');
counter = $('#myTable tr').length;
var newRow = $("<tr>");
var cols = "";
var hash = "#";
cols += '<td row-id="' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" readonly="true" value="' + counter + '" id="row_id" class="form-control input-sm txtRowId"><input type="hidden" class="txtDefect1Selection" id="defect1Selection_' + counter + '" name="defect1Selection_' + counter + '"><input type="hidden" class="txtDefect2Selection" id="defect2Selection_' + counter + '" name="defect2Selection_' + counter + '"><input type="hidden" class="txtPh1" id="Ph1_' + counter + '" name="Ph1_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm txtMaterial" id="material_id_' + counter + '" name="material_id_' + counter + '" style="width:150px" required></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm txtDescription" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"><input type="hidden" readonly="true" class="txtPlant" id="plant_' + counter + '" name="plant_' + counter + '"><input type="hidden" readonly="true" class="form-control input-sm txtHierarchy" id="hierarchy_' + counter + '" name="hierarchy_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="quantity_' + counter + '" name="quantity_' + counter + '" style="width:70px"><input type="hidden" value="quantity" id="quantityfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="bar_code_' + counter + '" name="bar_code_' + counter + '" style="width:150px"><input type="hidden" value="bar_code" id="barcodefixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="invoice_number_' + counter + '" name="invoice_number_' + counter + '" style="width:150px"><input type="hidden" value="invoice_number" id="invoicenumberfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="defect1_' + counter + '" name="defect1_' + counter + '" style="width:150px" readonly="true"><span class="btn btn-default btn-sm input-group-addon" id="defectsmodal1" onclick="openDefectsModal(' + counter + ','+$('#defect1_' + counter).val() +', '+ $('#defect1Selection_' + counter).val() +','+$('#Ph1_' + counter).val()+','+$('#claim_id').val()+',+1);"><span class="glyphicon glyphicon-eye-open"></span></span></div></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="defect2_' + counter + '" name="defect2_' + counter + '" style="width:150px" readonly="true"><span class="btn btn-default btn-sm input-group-addon" id="defectsmodal2" onclick="openDefectsModal(' + counter + ', '+$('#defect2_' + counter).val()+','+$('#defect2Selection_' + counter).val()+','+$('#Ph1_' + counter).val()+','+$('#claim_id').val()+',2);"><span class="glyphicon glyphicon-eye-open"></span></span></div></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="where_found" id="where_foundfixed_' + counter + '"><select name="where_found_' + counter + '" id="where_found_' + counter + '" style="height:30px" <option value="" selected></option><option value="1"><cfoutput>#textconstants.customer#</cfoutput></option><option value="2"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="shipment" id="shipmentfixed_' + counter + '"><select name="shipment_' + counter + '" id="shipment_' + counter + '" style="height:30px"><option value="" selected></option><option value="1"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="2"><cfoutput>#textconstants.post#</cfoutput></option><option value="3"><cfoutput>#textconstants.container#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm" id="remarks_' + counter + '" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>';
cols += '<td row-id="' + counter + '"><input type="hidden" value="rework" id="reworkfixed_' + counter + '"><select name="rework_' + counter + '" id="rework_' + counter + '" style="height:30px"><option value="" selected></option><cfoutput><option value="1">#textconstants.no_rework#</option><option value="2">#textconstants.failed_rework#</option><option value="3">#textconstants.rework_ok#</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-picture"></span></button></td>';
cols += '<td row-id="' + counter + '"><select name="product_installed_' + counter + '" id="product_installed_' + counter + '" style="height:30px; width:120px"></option><option value="TRUE"><cfoutput>#textconstants.yes#</cfoutput></option><option selected value="FALSE"><cfoutput>#textconstants.no#</cfoutput></option></select><input type="hidden" value="product_installed" id="productinstalledfixed_' + counter + '"></td>';
cols += '<td row-id="' + counter + '"><select name="request_' + counter + '" id="request_' + counter + '" style="height:30px; width:120px"><option value="" selected></option><option value="1"><cfoutput>#textconstants.credit_note#</cfoutput></option><option value="2"><cfoutput>#textconstants.replacement#</cfoutput></option><option value="3"><cfoutput>#textconstants.no_action#</cfoutput></option></select><input type="hidden" value="request" id="requestfixed_' + counter + '"></td>';
newRow.append(cols);
counter++;
$("table.order-list").append(newRow);
});
您的代码中有一些拼写错误。我在这里修复了它。附言id = "defect1_" 的元素在哪里声明？