asp.net - I'm using Ajax to populate my web page, but the populated HTML isn't working -

i'm using ajax dynamically populate div. have each page content stored in xml files cdata. when user clicks on link navigation bar, ajax loads xml particular page, parses it, , populates div it's content.

everything working great, except 1 thing. have jquery modal popup markup loaded page's xml file. .js , .css files jquery plugin loaded, , when hard coded (i.e., not loaded xml), works fine. when it's loaded xml, modal doesn't work.

when page loaded xml file- page supposed load html xml file, does, , there's hyperlink when clicked, it's supposed create modal popup window. instead, clicking on link not fire modal popup window.

when page hard coded- it's supposed do.

a live example at:

http://mikemarks.net/clientsites/tabras/

click on "the band", , @ bottom you'll see hyperlink called "demo". clicking on should bring modal popup window, instead can see takes top of page.

below markup (notice div id="copy", placeholder html content that's loaded xml file), ajax javascript code, , xml file (which shown markup that's loaded 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 custom message or redirect user page             document.getelementbyid('copy').innerhtml = "file not found";         }         else         {             document.getelementbyid('copy').innerhtml = "there problem retrieving 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 = '';         (var = 0; < 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 minimal styling , no additional options. there few css attributes set internally simplemodal, however, simplemodal relies on style options and/or external css , 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>   
  

it seems webpage lacks of jquery.simplemodal.js , basic.js , css associated ( example, display:none; on basic-modal-content )

that's why don't have modal on load.

plus, link or button doesn't have event handler (for example, $('.basic').click(...);)

that's why don't have other action anchor.

to remove anchor action, recommand use event.preventdefault