Databases
StackOverflow2013
Postsdbo
POjQuery not creating links in IE/Chrome, works in Firefox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery not creating links in IE/Chrome, works in Firefox
    text
    copied!<p>I'm trying to use jQuery 1.4.1 to parse an XML document and construct a list of links based on the content of this XML. So far I have this all working quite well in Firefox. However, when I view the same page in IE and Chrome, I see the <code>&lt;div&gt;</code> and <code>&lt;li&gt;</code> elements created, but the <code>&lt;a&gt;</code> elements do not appear. I'm sure I'm missing something simple but after looking at this for a while now, I'm not seeing it.</p> <p>HTML/JavaScript:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;script src="/Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("#result").ajaxError(function () { $(this).text("An error occurred while retrieving the site map"); }); // Get the site map XML $.get("SiteMap.xml", function (data) { // The div element that will contain our menu var menu = $("#menu"); // Iterate over each &lt;Group&gt; element $(data).find('Group').each(function () { // Create a new div to contain the current group var group = $("&lt;div&gt;").text($(this).attr("name")); // Create a new list for the current group var list = $("&lt;ul&gt;"); // Now iterate over the &lt;Page&gt; elements contained in the current &lt;Group&gt; element $(this).find("Page").each(function () { // Note that since we're doing a nested each(), the context of $(this) changes // Create a list item and a link for the current page, append to the list var item = $("&lt;li&gt;"); var link = $("&lt;a&gt;").attr({ href: $(this).attr("url"), text: $(this).attr ("title") }); item.append(link); list.append(item); }); // Append the list to the group's div and then append the group to the menu group.append(list); menu.append(group); }); $("#result").text("jQueryDemo Site Map"); }); }); &lt;/script&gt; &lt;body&gt; &lt;div id="result"&gt;&lt;/div&gt; &lt;div id="menu"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The XML that is being parsed is the following:</p> <pre><code>&lt;SiteMap&gt; &lt;Group name="Selectors"&gt; &lt;Page url="SelectById.htm" title="Select By Id" /&gt; &lt;Page url="SelectByCss.htm" title="Select By CSS Class" /&gt; &lt;Page url="SelectByElement.htm" title="Select By DOM Element" /&gt; &lt;/Group&gt; &lt;Group name="Events"&gt; &lt;Page url="Bind.htm" title="Bind" /&gt; &lt;Page url="Change.htm" title="Change" /&gt; &lt;Page url="Click.htm" title="Click" /&gt; &lt;Page url="Hover.htm" title="Hover" /&gt; &lt;/Group&gt; &lt;Group name="AJAX"&gt; &lt;Page url="Ajax.htm" title="Ajax" /&gt; &lt;Page url="AjaxError.htm" title="Ajax Error" /&gt; &lt;Page url="Get.htm" title="Get" /&gt; &lt;/Group&gt; &lt;Group name="Animation"&gt; &lt;Page url="Fade.htm" title="Fade" /&gt; &lt;Page url="Slide.htm" title="Slide" /&gt; &lt;/Group&gt; &lt;Group name="DOM Manipulation"&gt; &lt;Page url="Append.htm" title="Append" /&gt; &lt;Page url="AppendTo.htm" title="AppendTo" /&gt; &lt;Page url="Clone.htm" title="Clone" /&gt; &lt;Page url="Each.htm" title="Each" /&gt; &lt;/Group&gt; &lt;/SiteMap&gt; </code></pre> <p>Thanks in advance for any help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload