I am trying to create a a page that pulls in some content via AJAX. Here are the details: The base page has a bulleted list which is clickable. This list is inside a content element which itself is in a parent element (<div id="parent_container"><div id="base_content"><ul id="the_list">...</ul></div></div>) On clicking a list item, the content_container is hidden, and the new content is retrieved via AJAX as html (also tried it as text) and is added to the parent_container. An additional element is added containing a button to "return" to the base page.
As long as the new content does not contain javascript, everything works; if javascript is present, the page hangs and sometimes crashes the browser (FF3). What am I missing, so I can stop banging my head against the wall??? function GetContent(cid) { var pgcontent = new String(""); var lbpg = 'content_'+cid+'.htm'; $.ajax({async: false,cache: false,type: "GET",dataType: "html", contentType: "application/x-www-form- urlencoded;charset=ISO-8859-15", url: lbpg, success: function(html) { pgcontent = html; } }); return pgcontent; } $("li").click(function(){ var lbcontent = GetContent($(this).attr('id')); if (lbcontent != "" && lbcontent.length > 0) { $("#base_content").hide(); // add the return button && and our new content $("#parent_container").prepend('<div class="button_return"><a onClick="lbreturn();">' + '<img src=".\/images\/sys\/lb_return.png" \/><\/a><\/div>\n\n' + lbcontent); } }); Thanks! Mitch