我有一个表,用户可以使用jquery添加行。这一切都很好。 我遇到的问题是动态创建的行有一个带onclick事件的按钮,它打开一个模态屏幕,其值传递给模态屏幕。问题是我似乎无法让jquery选择器返回值。选择器是:$(" #defect1 _' + counter +'"。)val(),这个错误输出。 这适用于静态行,但在JS动态创建的行中失败。 我们非常感谢任何帮助。
更新的 使用onclick事件完全添加行功能: 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);
});
答案 0 :(得分:0)
当您添加新动态内容并尝试访问它或其值时,您应该在动态内容的选择器中包含包含动态生成内容的静态父级的名称。 尝试使用表作为静态父级。 例如:
$("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 =&#34; defect1 _&#34;宣布?