Jquery 中的多个追加调用在 IE 8 中失败答案

【问题标题】：Multiple append calls in Jquery failing in IE 8Jquery 中的多个追加调用在 IE 8 中失败
【发布时间】：2012-06-01 08:02:56
【问题描述】：

所以我正在开发一个使用 jquery 解析 xml 数据并将其动态添加到表中的 Web 应用程序。在页面的同一部分有四个表可以切换。这是相关的html：

<div id = "toggleSection">
<div id = "autoPrevData"></div>
<div id = "firePrevData"></div>
<div id = "auto1Data"></div>
<div id = "auto2Data"></div>
<div id = "auto3Data"></div>
</div>

这是带有 AJax 的 Jquery 函数：

    $("#autoEarly").click(function() {
        if (!$("#firePrevData").is(":hidden")) {
            $("#firePrevData").toggle('slow');
        }
        if (!$("#auto1Data").is(":hidden")) {
            $("#auto1Data").toggle('slow');
        }
        if (!$("#auto2Data").is(":hidden")) {
            $("#auto2Data").toggle('slow');
        }
        if (!$("#auto3Data").is(":hidden")) {
            $("#auto3Data").toggle('slow');
        }
        if (loadedModels[0]) {
            loadedModels[0] = false;
            $.ajax
        ({
            type: "GET",
            url: "dashboard_auto.xml",
            dataType: "xml",
            success: parseXml_AutoEarly
        });
        }
        else {
            $("#autoPrevData").toggle('slow');
        }
        return false;

    });

这是真正解析 xml 的函数：

    function parseXmlEarlyPrevention(xml, xmlRoot, data) {
    //First Header
    $(data).append("<table><tr><th colspan='5'>Model Information</th><th colspan='4'>Score Metrics</th><th colspan='5' >Variable Metrics</th><th colspan='5' style='600;'>Pseudo-Standardized Coefficient Metrics</th></tr>");
    //Second headers
    $(data).append("<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class='thickBorder'>&nbsp;</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black'>PSI:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:2px solid black;'>Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Divergence:</td><td colspan='3' style='font-size:1em; color:#888888; border-right:2px solid black;'>Largest Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Sum of Changes:</td><td colspan='3' style='font-size:1em; color:#888888;'>Largest Change in Relative Importance:</td></tr>");
    //Third Headers
    $(data).append("<tr><td>Model</td><td>Avg Rank</td><td>Benchmark</td><td>Current</td><td class='thickBorder'># in Curr Period</td><td>Rank</td><td class='thinBorder'>Value</td><td>Rank</td><td class='thickBorder'>Value</td><td>Rank</td><td class='thinBorder'>Average</td><td>1st</td><td>2nd</td><td class='thickBorder'>3rd</td><td>Rank</td><td style='border-right:1px solid black;'>Value</td><td>1st</td><td>2nd</td><td>3rd</td></tr>");

        var x = 1;
        $(xml).find(xmlRoot).each(function() {
            if (x % 2 == 1) {
                $(data).append("<tr>");
                $(data).append("<td class='dataCellBlue'><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("avg_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("benchmark").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("current").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("n_current").text() + "</td>");
                $(data).append("<td class='dataCellBlue " + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("psi").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("divergence_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("divergence").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
                $(data).append("</tr>");
            }
            else {
                $(data).append("<tr>");
                $(data).append("<td><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
                $(data).append("<td>" + $(this).find("avg_rank").text() + "</td>");
                $(data).append("<td>" + $(this).find("benchmark").text() + "</td>");
                $(data).append("<td>" + $(this).find("current").text() + "</td>");
                $(data).append("<td class='thickBorder'>" + $(this).find("n_current").text() + "</td>");
                $(data).append("<td class='" + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("psi").text() + "</td>");
                $(data).append("<td>" + $(this).find("divergence_rank").text() + "</td>");
                $(data).append("<td class='thickBorder'>" + $(this).find("divergence").text() + "</td>");
                $(data).append("<td class='" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
                $(data).append("<td class='thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
                $(data).append("<td class='" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
                $(data).append("</tr>");
            }
            x++;

        });
        $(data).append("</table>");
        $(data).toggle("slow");
    }

问题是只有第一个 $(data).append() 调用中的 html 被显示，之后什么也没有。它在 safari 和 firefox 中运行良好，但它适用于工作，我需要它在 IE 上运行。我已经在互联网上倾注了几个小时试图找到一个好的解释，但到目前为止我没有运气，坦率地说，它让我有点发疯。感谢您的帮助

【问题讨论】：

标签： jquery html xml ajax append

【解决方案1】：

DOM 更新成本很高，在这种情况下每次追加后都会发生更新。最好将其构建为一个字符串并一步插入。

【讨论】：

我应该如何将其构建为字符串？我尝试做一些事情来创建一个 var x 并附加到它，只在最后附加到数据，但这没有用，尽管我可能做错了......
这才是正确的方法。也许还有另一个问题。
好吧，我发现的问题是只有第一个附加实际上在做任何事情；例如，当我加载网页时，只会加载第一个附加的表格数据。
没关系，我实际上刚刚解决了它。原来它就像在顶部添加 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 一样简单。愚蠢的错误，不过感谢您的帮助。