jQuery在Internet Explorer中不起作用

Question

I am trying to create a dynamic menu by reading an XML file using jQuery. I have developed the code, and it works fine in Firefox 3 and Chrome, however it just doesn't work for Internet Explorer 7/8.

I'm posting my code below. What is the matter with it?

  var menu ="";
  $(document).ready(function()
  {
      $.ajax({
          type: "GET",
          url: "menu.xml",
          dataType: "xml",
          success: parseXml
      });
  });

  function parseXml(xml)
  {
      $(xml).find('link').each(function(x){
          var link = $(this);
          var title = link.attr("name");

          menu += "<div class='AccordionPanel AccordionPanelClosed'>";
          menu += "<div class='AccordionPanelTab'><span></span>";
          menu += "<a href='javascript:;'>"+title+"</a></div>";

          link.find("inLink").each(function(z){
              var intitle = $(this).attr("name");
              menu += "<div class='AccordionPanelContent'>";
              menu += "<ul><li>";
              menu += "<a href='"+$(this).attr("ref")+"'>"+intitle+"</a>";
              menu += "</li></ul></div>";
          });
          menu += "</div>";
      });

      $("#LeftMenu").append(menu);
  }

The XML file has the following structure

  <links>
      <link name="Reception" ref="index.html">
          <inLink name="Registration" ref="registration.html"/>
          <inLink name="Inquiry" ref="#"/>
      </link>
      <link name="Records" ref="#">
          <inLink name="Records" ref="#"/>
          <inLink name="Records2" ref="#"/>
      </link>
  </links>

Answer 1

I had a similar problem parsing an XML AJAX return, it worked fine on FF, but failed on IE.

The problem I had was extra nodes between the nodes that you are expecting. IE adds text nodes with whitespace to the XML DOM where there is whitespace in the XML file.

I fixed it by changing the generated XML so there was no whitespace between nodes.

Answer 2

Could you try:

 $("#LeftMenu").append($(menu));

it's just a thought though.

Answer 3

I could be wrong, but try this for your ajax request instead.

$.ajax({ type: "GET", url: "menu.xml", dataType: "xml", success: function(xml){parseXml(xml);} });