我使用Ajax来填充我的web页面,但是填充的HTML不起作用

我使用Ajax动态填充一个DIV,我将每个页面的内容作为CDATA存储在XML文件中。当用户单击导航栏中的链接时,Ajax加载该特定页面的XML,解析它,并用它的内容填充DIV。

当页面被硬编码时-它做了它应该做的一切。

例如:

http://mikemarks.net/clientSites/tabras/

点击“乐队”,在底部你会看到名为“演示”的超链接。点击它会弹出一个模式弹出窗口,但是正如你所看到的,它只会带你到页面的顶部。

下面是我的标记(注意div id=“copy”,它是从XML文件加载的HTML内容的占位符)、我的Ajax JavaScript代码和我的XML文件(显示为加载到div id=“copy”中的标记)。

<div id="leftTwoThirdsColumn">
            <div id="menu">
                <ul class="menu">
                    <li style="width:65px;"><a id="default" href="#" onclick="makeRequest('xml/default.xml');"><span>Home</span></a></li>
                    <li style="width:65px;"><a id="lyrics" href="#" onclick="makeRequest('xml/lyrics.xml');"><span>Lyrics</span></a></li>
                    <li style="width:110px;"><a id="merch" href="#" onclick="makeRequest('xml/merch.xml');"><span>Merchandise</span></a></li>
                    <li style="width:93px;"><a id="bio" href="#" onclick="makeRequest('xml/bio.xml');"><span>The Band</span></a></li>
                    <li style="width:80px;"><a id="contact" href="#" onclick="makeRequest('xml/contact.xml');"><span>Contact</span></a></li>
                    <li style="width:150px;" class="last"><a id="friends" href="#" onclick="makeRequest('xml/friends.xml');"><span>Friends of Tabr&auml;s</span></a></li>
                </ul>
            </div>
            <br /><br />

            <div id="copy">

            </div>
        </div>

function makeRequest(url) 
{
    if(window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        request = new ActiveXObject("MSXML2.XMLHTTP");
    }

sendRequest(url);


}

function sendRequest(url)
{
    request.onreadystatechange = onResponse;
    request.open("GET", url, true);
    request.send(null);
}

function checkReadyState(obj)
{
    if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; }
    if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; }
    if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; }
    if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; }
    if(obj.readyState == 4)
    {
        if(obj.status == 200)
        {
            return true;
        }
        else if(obj.status == 404)
        {
            // Add a custom message or redirect the user to another page
            document.getElementById('copy').innerHTML = "File not found";
        }
        else
        {
            document.getElementById('copy').innerHTML = "There was a problem retrieving the XML.";
        }
    }
}

function onResponse() 
{
    if(checkReadyState(request)) {
        var response = request.responseXML.documentElement;
        var root = new Array();
        root = response.getElementsByTagName('');
        //alert("Total Number of HTML Elements Found: " + response.getElementsByTagName("").length);
        var html = '';
        for (var i = 0; i < root.length; i++) {
            var tagName = response.getElementsByTagName("").item(i).nodeName;
            var tagObj = response.getElementsByTagName("").item(i);
            html += tagObj.firstChild.nodeValue;
        }
        document.getElementById('copy').innerHTML = html;
    }
}

  <div style="padding-top:5px; margin-left:auto; margin-right:auto; text-align:center;">
    <img src="images/ShawnBioActive.png" />
    <img src="images/JasonBioActive.png" />
    <img src="images/WillBioActive.png" />
    <img src="images/RasoulBioActive.png" />
    <img src="images/bioStrip.png" />
    <div id='basic-modal'><h3>Basic Modal Dialog</h3><p>A basic modal dialog with minimal styling and no additional options. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p><input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a></div><script type="text/javascript" src="../js/modal/jquery.simplemodal.js"></script><script type="text/javascript" src="../js/modal/basic.js"></script><link type="text/css" href="../css/modal/demo.css" rel="stylesheet" media="screen" /><link type="text/css" href="../css/modal/basic.css" rel="stylesheet" media="screen" /><script type='text/javascript'>jQuery().ready(function () {$('#basic-modal-content').modal();});</script>
    <div id="basic-modal-content"><h3>Basic Modal Dialog</h3></div><div style='display:none'><img src='images/modal/basic/x.png' alt='' /></div></test2>
  </div>