我一直在尝试将动态对象添加到另一个动态对象中。下面我有一个简短的代码，我想要做什么。由于某些原因，再次找到 id 会遇到麻烦。
创建第二个块的第一个块：
var comp_idx = 0;
function addComponent() {
var html = '<div id="comp_row' + comp_idx + '" class="row padding610">' +
'<h5>Component</h5>' +
'<div class="row">' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_note' + comp_idx + '">Component Notes</label>' +
'<input name="comp_note' + comp_idx + '" type="text" id="comp_note' + comp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_sku' + comp_idx + '">Component SKU/Description</label>' +
'<input name="comp_sku' + comp_idx + '" type="text" id="comp_sku' + comp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_quantity' + comp_idx + '">Quantity</label>' +
'<input name="comp_quantity' + comp_idx + '" type="text" id="comp_quantity' + comp_idx + '" />' +
'</div>' +
'</div>' +
'</div>' +
'<h5>RMAT Material SKUs Needed</h5>' +
'<div class="row" style="margin-bottom:10px;">' +
'<input type="button" id="add-button-comp' + comp_idx + '" value="Add Additional Raw Materials" onclick="addRMATComp()" />' +
'</div>' +
'<div id="rmatsComp' + comp_idx + '" class="brown lighten-2"></div>' +
'<div class="row" style="margin-bottom:10px;">' +
'<input type="button" id="add-button-comp' + comp_idx + '" value="Add Non Machine Charges To Component" onclick="addNmcQuoteItemComp()" />' +
'</div>' +
'<div id="NonMachineQuoteComp' + comp_idx + '" class="brown lighten-4"></div>' +
'<div class="row">' +
'<div class="col s12">' +
'<div class="input-field"><a onclick="removeElement(\'comp_row' + comp_idx + '\');" id="delete-icon"' + 'class="waves-effect waves-teal btn-del-comp">Delete Component</a>' +
'</div>' +
'<div class="row">' +
'<div class="divider-row"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#ComponentDetails').append(html);
comp_idx++;
$('select').select2();
}
创建另一个元素的第二个函数：
var rmatComp_idx = 0;
function addRMATComp() {
var html =
'<div id="rmatComp_row' + rmatComp_idx + '" class="row padding2">' +
'<div class="row">' +
'<div class="col s4">' +
'<div class="input-field">' +
'<select id="comp_rmat_type' + rmatComp_idx + '" name="comp_rmat_type' + rmatComp_idx + '" class="browser-defaultR" onchange="loadRmatByType(\'comp_rmat_type' + rmatComp_idx + '\',\'comp_rmat_select' + rmatComp_idx + '\')">' +
'<?php echo str_replace('\'', '"', $rmatStockTypeOptions); ? > ' +
'</select>'+
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<select id="comp_rmat_select' + rmatComp_idx + '" name="comp_rmat_select' + rmatComp_idx + '" class="browser-defaultR" onchange="loadRmat(\'comp_rmat_type' + rmatComp_idx + '\',\'comp_rmat_select' + rmatComp_idx + '\',\'comp_rmat_desc' + rmatComp_idx + '\',\'comp_rmat_cost' + rmatComp_idx + '\',\'comp_rmat_markup' + rmatComp_idx + '\',\'comp_rmat_unit' + rmatComp_idx + '\')">' +
'</select>' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_rmat_desc' + rmatComp_idx + '">Description</label>' +
'<input name="comp_rmat_desc' + rmatComp_idx + '" type="text" id="comp_rmat_desc' + rmatComp_idx + '" />' +
'</div>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_qty' + rmatComp_idx + '">Quantity</label>' +
'<input name="comp_rmat_qty' + rmatComp_idx + '" type="number" id="comp_rmat_qty' + rmatComp_idx + '" class="comp_rmat_qty" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_cost' + rmatComp_idx + '">Cost</label>' +
'<input name="comp_rmat_cost' + rmatComp_idx + '" type="number" id="comp_rmat_cost' + rmatComp_idx + '" step="0.01" class="comp_rmat_cost" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s2">' +
'<div class="input-field">' +
'<label for="comp_rmat_true_cost' + rmatComp_idx + '">Cost Without Markup</label>' +
'<input name="comp_rmat_true_cost' + rmatComp_idx + '" type="number" id="comp_rmat_true_cost' + rmatComp_idx + '" step="0.01" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_markup' + rmatComp_idx + '">Markup</label>' +
'<input name="comp_rmat_markup' + rmatComp_idx + '" type="number" id="comp_rmat_markup' + rmatComp_idx + '" step="0.001" class="comp_rmat_markup"' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s2">' +
'<div class="input-field">' +
'<label for="comp_rmat_extended' + rmatComp_idx + '" class="active">Extended</label>' +
'<input name="comp_rmat_extended' + rmatComp_idx + '" type="text" id="comp_rmat_extended' + rmatComp_idx + '" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_unit' + rmatComp_idx + '">Unit of Measure</label>' +
'<input name="comp_rmat_unit' + rmatComp_idx + '" type="text" id="comp_rmat_unit' + rmatComp_idx + '" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_rmat_instructions' + rmatComp_idx + '">RMAT Instructions</label>' +
'<input name="comp_rmat_instructions' + rmatComp_idx + '" type="text" id="comp_rmat_instructions' + rmatComp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col s12">' +
'<div class="input-field">' +
'<a onclick="removeElement(\'rmatComp_row' + rmatComp_idx + '\');" id="delete-icon" ' + 'class="waves-effect waves-teal btn-flat btn-del-row">Delete RMAT Row</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#rmatsComp' + rmatComp_idx + '').append(html);
//console.log(html);
rmatComp_idx++;
$('select').select2();
alert(comp_idx);
}
rmatsComp是在另一个函数上动态创建的。下面是按钮：
<input type="button" id="add-button-comp0" value="Add Additional Raw Materials" onclick="addRMATComp()">
如果有人能够看到问题或指出我正确的方向，我将不胜感激。
Here is an example i wrote to make it smaller. Hopefully its clear what I want to do.