Problem with anchors embedded in dynamic <div> content with AJAX -- WEB400

Hi all

I am working on a site, where I have a header, a menu below that, the content below that, and a footer. The idea is for each option on the menu to point to a page that has only the contents of the content <div> - using AJAX to retrieve that content, then set the html property of the div to that content. The javascript and basic structure are listed at the bottom. Assume this is called index.html

The menu items have their click events set to use $("#menu a").click(function() function - my problem is, anchors in the content pointed to by each anchor do not get their click event handler registered. You can see where I tried using a class of sitelink to identify these anchors. That event is bound only when the contents of home.html have the link, and only when the page is first loaded - because when the <div> is loaded, the "document ready" function of JQuery is not called - document is already loaded.

So how do I get the links embedded in content to have their anchor event bound as I want?

There is another issue - the backspace (previous page) key does not work, since there is not "previous" page until there is an external link. And when you do go to an external link, it doesn't go back to the "page" it was on, it goes back to index.html. This might be a reason for me to put everything on every page - header, menu, footer, in addition to content. This'd make the pages a little bigger, but less than they were - am modifying an old design that did not use CSS and used tables like crazy for presentation.

Thanks for your thoughts
Vern

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>This is set by bound click function - see below</title>
<meta name="Author" content="TE/VMH">
<meta name="keywords" content="Inver Hills Community Band, Inver Grove Heights, community band">
<meta name="description" content="Inver Hills Community Band Web Site">
<meta name="publisher" content="Inver Hills Community Band -- Inver Grove Heights, MN 55076 -- USA">
<meta name="copyright" content="Copyright 2003-2007, Inver Hills Community Band">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/superfish.css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish({
animation: {height:'show',opacity:'show'}, // slide-down effect with fade-in
delay: 1000 // 1.0 second delay on mouseout
});
});
</script>

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
document.title = "Main document title";
$.ajax({
url: "home.html",
cache: false,
success: function(html){
$("#content").html(html);

$(".sitelink").click(function(){
document.title = $(this).attr("title");
alert(document.title);
$.ajax({
url: $(this).attr("href"),
cache: false,
success: function(html){
$("#content").html(html);
}
});

return false;
});

}
});

$("#menu a").click(function(){
document.title = $(this).attr("title");
$.ajax({
url: $(this).attr("href"),
cache: false,
success: function(html){
$("#content").html(html);
}
});

return false;
});
});
/* ]]> */
</script>
</head>

<body>
<div id="header">

</div>

<div id="menu">

</div>


<div id="content">

</div>


<div id="footer">

</div>
</body>
</html>