创建 <td> 动态地使用jQuery。 IE 11中出现意外结果

Question

我正在编写各种仪表板。 进行了多个API调用，根据结果，我在屏幕上动态创建了元素。

该功能可以在Chrome 56，Firefox ESR 45.7.x和Microsoft Edge中按预期方式100％运行。 罪魁祸首是IE 11（不幸的是，我仍然需要它的支持）。

动态创建单元格时（查找以'var col1LED'开头的行），由于某种原因，它仅适用于$ .each的第二次（以及随后的）迭代。 在第一次迭代中，存在key的值（我已经使用console.log进行了检查），但是生成的td对象为空。

我不知道接下来要去哪里。 我已经在leborem上搜索了Google并进行了搜索，但没有任何明显的结果。

以下是直接从仪表板代码复制的文件（明显的敏感名称/呼叫已更改）。

/* ... 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);


            });
});

Answer 1

一个可能的原因是，您正在每个同步的循环上运行AJAX请求，并在每个请求的成功回调中使用“ key”的值，该值是异步的，因此丢失了key的范围。

如果仍不能解决问题，请在HTML和上下文的其余部分（如有需要，请提供伪数据）中张贴文字，我很乐意为您详细介绍。 尽管如此，您仍应仅出于适当而稳定的Javascript代码而保留自调用函数。

---

更新的答案：

尝试将其添加到最终的promise（）中：

var html = tableWlcData.join("\n");
console.log(html);
dataTable.html(html);

如果将表的HTML直接设置到表中而不是通过jQuery对象将其作为数组追加到IE中不能解决问题，请检查打印到控制台的HTML并检查是否可能导致IE11的HTML格式错误窒息。

另外，请确保您使用的是最新版本的jQuery（当前版本为3.1.1），以防万一您使用的版本中存在IE特定的错误。

Answer 2

罪魁祸首如下：

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

此函数仅执行以下操作：

function clearPanel(elementId)
{
    $(elementId).html('');
}

不知道为什么会引起问题，但是我将循环更改为仅在行“ 0”时才执行clearPanel 。

工作中