Javascript 查找对象的当前id并动态附加它

我一直在尝试将一个动态对象添加到另一个动态对象。下面我有一个简短的代码，我正在尝试做什么。由于某种原因，它无法再次找到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();
}

如果有人能看到这个问题或给我指出正确的方向，我将不胜感激

---

您将不得不发布更多的代码，最好是一个jsbin或Fiddle。您的代码看起来不错。需要代码的其余部分来找出问题所在。在这里检查这个提琴也许你应该先清空“$（'#rmatsComp'+rmatComp_idx）”，然后添加东西。如果没有完整的代码示例，很难判断发生了什么。看起来像是比赛条件反射之类的。有一件事，通过替换

onclick

事件监听器，您可以在代码中保留元素的引用，从而消除惟一的id标记。尽管这是，再次，很难说不看完整的上市。

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

<input type="button" id="add-button-comp0" value="Add Additional Raw Materials" onclick="addRMATComp()">