jQuery.html() 方法在 IE7 和 IE8 上无法正常工作答案

【问题标题】：jQuery.html() method is not working appropriately on IE7 and IE8jQuery.html() 方法在 IE7 和 IE8 上无法正常工作
【发布时间】：2012-11-29 04:38:03
【问题描述】：

我一直在使用 jQuery，但最近在使用 jQuery 的 .html() 方法时遇到了 IE7 和 IE8 的问题。如果我收到来自 AJAX 调用的 XML 响应并尝试获取该响应的特定片段的 innerHTML，我得到一个未定义的。

现在这可以在 Firefox、Chrome 和 IE 9 上完美运行。

请看下面的sn-p：

 var data = 
     "<reponse_data>" + 
     "  <chart_data>" + 
     "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
     "          <set label='Inventario' value='1203' />" + 
     "          <set label='Recibidas' value='3423' />" + 
     "          <set label='Subastadas' value='3661' />" + 
     "          <set label='Entregadas' value='3648'  />" + 
     "          <set label='Balance' value='978'  />" + 
     "      </chart>" + 
     "  </chart_data>" + 
     "  <misc>" + 
     "      <initialInvCell>1,203</initialInvCell>" + 
     "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
     "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
     "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
     "      <finalInventoryCell>978</finalInventoryCell>" + 
     "  </misc>" + 
     "</reponse_data>";

 console.log('ChartData: ' + $(data).find('chart_data').html());

【问题讨论】：

标签： jquery html internet-explorer

【解决方案1】：

$(data) 还不是 HTML。它是一个字符串，因此它没有任何 jQuery 使用的与之关联的 DOM。在尝试将其与 jQuery 一起使用之前，您需要将其转储到 DOM 中。

既然你从某个地方得到这个字符串，也许最好的办法（性能和内存方面）是解析字符串并获得你想要的值。您可以使用正则表达式，也可以查找左括号和右括号的索引，然后获取介于两者之间的任何内容。

【讨论】：

好的，我上面放的是代码的过度简化版本。上面的 XML 只是我通过 .ajax() 调用得到的响应。所以你基本上是说，如果我将此响应转储到一个不可见的 div 并从那里获取它应该可以工作吗？如果我做类似的事情，它可以工作吗： $('
').append(data).html()
嗨@cem 我确实尝试过我只是想确保我们在同一页面上。如果您不打算提供有用的输入，请停止在线程上燃烧。如果你继续阅读，你会看到我的两个测试。我已经尝试了他提出的所有建议，然后又尝试了一些。
很抱歉，如果您认为这意味着粗鲁。我刚刚读到“它是否有效，当......”，在我看来，这表明你没有自己尝试过。只是不想在这里保持质量:)

【解决方案2】：

编辑：我已经更新了我的答案。请参阅此 jsfiddle 以查看它的工作原理...

注意这是使用 jquery 1.8.2

html:

<div id="maincontent">
    hello world
</div>

js:

var data = 
 "<reponse_data>" + 
 "  <chart_data>" + 
 "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
 "          <set label='Inventario' value='1203' />" + 
 "          <set label='Recibidas' value='3423' />" + 
 "          <set label='Subastadas' value='3661' />" + 
 "          <set label='Entregadas' value='3648'  />" + 
 "          <set label='Balance' value='978'  />" + 
 "      </chart>" + 
 "  </chart_data>" + 
 "  <misc>" + 
 "      <initialInvCell>1,203</initialInvCell>" + 
 "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
 "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
 "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
 "      <finalInventoryCell>978</finalInventoryCell>" + 
 "  </misc>" + 
"</reponse_data>";

var a = $("<div/>",{
    html: data,
    id: "darth",
    style: "display:none;"
}).appendTo($("#maincontent"));

var b = a.find("chart_data").html();

alert(b);

旧答案：

我认为这不会起作用，因为那时它还不是真正的 html。它是一串文本，直到它被注入到 dom 中......

如果你想使用 .html() 之类的方法，我建议先将其转储到 dom 中。

类似...

var data = "data" + "more data..." + "more data"...


var a = $("<div/>",{html: data, display: "none"}).appendTo($("body"));

那么……

var b = a.find("chart_data").html();

它不是很漂亮，但它应该可以工作......

【讨论】：

我两个都试过了： var data = "...";//同上 $('#placeholder').html(data); console.log($('#placeholder').find('chart_data').html());以及 var data = "...";//同上 var a = $("
",{html: data, display: "none"}).appendTo($("body") ); var b = a.find("chart_data").html();控制台.log(b);在 Firefox 中完美，但在 IE7-8 中没有运气。
@sonar 你用的是什么版本的jQuery？
...我更新了我的答案。然后我在ie8中试了一下。当。它没有用。仍在努力。
它看起来很棒@teewuane，但你能在IE7或IE8上试试这个吗？因为我通过运行我的 IE9 Browser mode: IE8 和 Document mode: IE8 进行了尝试，结果是一个显示未定义的警报框。在 Firefox 和 IE9 中完美运行。我正在code.jquery.com/jquery-latest.js (1.8.3) 下测试我的代码。
哦，我没有看到你的第二条评论。感谢您的努力，我也在这里尝试了一些想法。

【解决方案3】：

嗨@teewuane 和@joshua，

感谢您的所有帮助。通过执行以下操作，我成功实现了我的目标：

http://jsfiddle.net/CcWfj/3/

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
       function ieParse () {
            //var xmlText = "<root><fruit color='red'></fruit></root>";
            var xmlText = "<reponse_data>" + 
                          "   <chart_data>" + 
                          "       <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78'     toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1'     bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
                          "           <set label='Inventario' value='1203' />" + 
                          "           <set label='Recibidas' value='3423' />" + 
                          "           <set label='Subastadas' value='3661' />" + 
                          "           <set label='Entregadas' value='3648'  />" + 
                          "           <set label='Balance' value='978'  />" + 
                          "       </chart>" + 
                          "   </chart_data>" + 
                          "   <misc>" + 
                          "       <initialInvCell>1,203</initialInvCell>" + 
                          "       <receivedUnitsCell>3,423</receivedUnitsCell>" + 
                          "       <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
                          "       <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
                          "       <finalInventoryCell>978</finalInventoryCell>" + 
                          "   </misc>" + 
                          "</reponse_data>";

            var xmlDocument = XMLFromString(xmlText);
            var chartData = XMLToString(xmlDocument.childNodes[0].childNodes[0].childNodes[0]);
            var elementsData = XMLToString(xmlDocument.childNodes[0].childNodes[1]);

            alert(chartData);
            alert(elementsData);

        }

        function XMLToString(oXML) {
          if (window.ActiveXObject) {
            return oXML.xml;
          } else {
            return (new XMLSerializer()).serializeToString(oXML);
          }
        }

        function XMLFromString(sXML) {
          if (window.ActiveXObject) {
            var oXML = new ActiveXObject("Microsoft.XMLDOM");
            oXML.loadXML(sXML);
            return oXML;
          } else {
            return (new DOMParser()).parseFromString(sXML, "text/xml");
          }
        }


    </script>
</head>
<body>
    <button onclick="ieParse ()">IE Parse</button>
</body>

所以对于 IE7 和 IE8，我基本上不得不放弃使用 jQuery 的 .find() 和 .html() 函数。

还有 Joshua，我会为你的 cmets 提供建议。

我使用了以下参考： http://joncom.be/code/javascript-xml-conversion/

再次感谢，

【讨论】：