​​を動的に作成するにはjqueryを使用します。 IE 11での予期しない結果

Question

私は種類のダッシュボードを書いています。複数のAPI呼び出しが行われ、その結果に基づいて、画面上に要素を動的に作成します。

これは、Chrome 56、Firefox ESR 45.7.x、およびMicrosoft Edgeでは、期待どおりに動作します。 原因はIE 11です（私は残念ながらこれをサポートする必要があります）。

何らかの理由でセルが動的に作成された場合（何らかの理由で）、の反復が$ .eachのの2番目（およびそれに続くもの）でのみ機能します。最初の反復では、キーの値が存在します（console.logを使用して確認しましたが）結果のtdオブジェクトは空です。

私は次にどこを見なければならないのですか？私はGoogleで検索しましたが、このは義手ので検索されました。

次は、ダッシュボードコードから直接コピーされます（明快な機密名/呼び出しが変更されています）。一つの可能​​な理由は、あなたが同期している各ループ上のAJAXリクエストを実行して、各要求の成功コールバック内の「キー」の値を使用して、非同期であるため、していることが考えられ

/* ... this happens inside the '.done' of another ajax call */ 
dataTable = $("#tblData"); 
$.each(response.data, function(row, key) 
{ 
    $.ajax({ 
     method: "GET", 
     url: url.origin + "/API/v1/objects/" + key.ID, 
     data: { type: "wlc", identifier_type: "wlcap", status: "0" }, 
     }).done(function(apResponse){ 
      /* Determine the status for each AP found 
       Status values for each 
       1 - Active and associated 
       2 - Disassociated 
       3 - Downloading 
       all that don't match go to 'u' for 'unknown;' 
      */ 
      var status_1 = 0; 
      var status_2 = 0; 
      var status_3 = 0; 
      var status_u = 0; //Unknown 
      $.each(apResponse.data, function(apRow, apKey){ 
       switch (apKey.status){ 
        case "1": 
         status_1 += 1; 
         break; 
        case "2": 
         status_2 += 1; 
         break; 
        case "3": 
         status_3 += 1; 
         break; 
        default: 
         status_u += 1; 
         break; 
       } 
      }) 

      /* Once all the AP statusses have been tallied, write the info for the specific node */ 
      var ledFile = "LEDgreen.svg"; 
      var cssClass = "table-cell-black"; 
      if (status_2 != 0) 
      { 
       ledFile = "LEDred.svg"; 
       cssClass = "table-cell-critical"; 
      } else if (status_3 != 0) { 
       ledFile = "LEDorange.svg"; 
       cssClass = "table-cell-warning"; 
      } else { 
        ledFile = "LEDgreen.svg"; 
       cssClass = "table-cell-black"; 
       } 

      clearPanel("#tblController"); //First clear any existing data using seperate function 

      /* Create headers for table */ 
      var colHead1LED = $('<th></th>').addClass('table-header table-cell-center').html(''); 
      var colHead2wlcDetail = $('<th></th>').addClass('table-header table-cell-left').html(''); 
      var colHead3APOK = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Active and Asssociated">A/A</div>'); 
      var colHead4APDown = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Disassociated">D/A</div>'); 
      var colHead5APTotal = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Downloading">D/L</div>'); 
      var colHead6APExtra = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Total">Total</div>'); 

      /* Add new row */ 
      var headerRow = $('<tr></tr>'); 
      /* Append each of the cells/headers to the header row */ 
      headerRow.append(colHead1LED); 
      headerRow.append(colHead2wlcDetail); 
      headerRow.append(colHead3APOK); 
      headerRow.append(colHead4APDown); 
      headerRow.append(colHead5APTotal); 
      headerRow.append(colHead6APExtra) 
      /* Add row to table */ 
      dataTable.append(headerRow); 

      /* Create cells */   
      var col1LED = $('<td></td>').addClass('table-cell table-cell-center').html('<img class="LED" style="width:1.0em;height:1.0em;" title="Status" src="resources/images/'+ ledFile +'">'); 
      var col2wlcDetail = $('<td></td>').addClass('table-cell ' + cssClass).html('<a href="#" onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" title="' + key.description + ' (' + key.ip + ')">' + key.description + ' (' + key.ip + ')</a>'); 
      var col3APOK = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 1);" class="button-success">' +status_1 + '</button>'); 
      var col4APDown = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 2);" class="button-danger">' +status_2 + '</button>'); 
      var col5APTotal = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 3);" class="button-warning">' +status_3 + '</button>'); 
      var col6APExtra = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" class="button-info">' + (status_1 + status_2 + status_3) + '</button>'); 


      /* Create data row */ 
      var dataRow = $('<tr></tr>').addClass('table-row-data'); 

      /* Add cells to row*/ 
      dataRow.append(col1LED); 
      dataRow.append(col2wlcDetail); 
      dataRow.append(col3APOK); 
      dataRow.append(col4APDown); 
      dataRow.append(col5APTotal); 
      dataRow.append(col6APExtra); 

      /* add row to array*/ 
      tableWlcData.push(dataRow); 


      }).promise().done(function(){ 
       /* Once everything is done, append the array of ROWS to the table */ 

       dataTable.append(tableWlcData); 


      }); 
});