Question

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

这在Chrome 56，Firefox ESR 45.7.x和Microsoft Edge中的预期效果为100％。罪魁祸首是IE 11（不幸的是，我仍然需要支持）。

当动态创建单元格时（查找以＆＃39; var col1LED＆＃39;开头的行），由于某种原因它只适用于第二个（以及后面的那些）迭代（$）$ .each。在第一次迭代中，键的值存在（我已使用console.log检查过），但生成的 td 对象为空。

我不知道下一步该去哪儿。我已经谷歌搜索了 at leborem 而没有任何重大结果。

以下是直接从仪表板代码中复制的（明显敏感的名称/调用已更改）。

/* ... 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”的值，这是异步的，因此{{{{失去了。}

如果这不能解决问题，请发布HTML和其他上下文的小提示（如果需要，可以使用虚拟数据），我很乐意为您详细查看。不过，你应该保留自我调用功能只是为了正确和稳定的Javascript代码。

更新的答案：

尝试在最终的promise（）中添加它：

key

如果将表的HTML直接设置到表中而不是通过jQuery对象将其作为数组附加，则不会在IE中修复它，那么请查看打印到控制台的HTML并检查是否存在格式错误的HTML导致IE11窒息。

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

Answer 2

以下行是罪魁祸首：

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

这是一个简单执行以下操作的功能：

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

不确定为什么这会导致问题，但我将循环更改为仅clearPanel如果我在行＆＃39; 0＆＃39;。

现在正在工作

使用jquery动态创建。 IE 11中出现意外结果

2 个答案: