I'm trying to update my personal website a bit by using a bit of dynamic page loading using jquery. I have made a dynamic main menu that loads sub menus and a bottom section div with content depending on what you click. The main menu works fine with the code below and loads the sub menus and bottom section with the correct content so long as it was launched using the original index.html code.
However, my issue is the sub menu href links that get loaded into the left hand sub menu div do not execute their content in the content div. Only the sub menus that get loaded with the index.html function as normal.
Do I have to reapply my scripts or something when a new div is loaded into position?
My code seems to work on the initial page only. I've been combing over various examples on what to do, but I'm struggling to see how many examples are applicable with what I am trying to do. I'm a python guy so forgive my javascript/jquery ignorance.
Am I missing something? I'm simply trying to get the sub menus that get loaded to actually allow the user to load the proper content into the bottom section.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
in the body:
<script>
$("#header .menu ul li a").on("click", function(){
i=$(this).data("value")
$("#menu").load(i+" #menu > *");
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
$("#body_container .left_container ul li a").on("click", function(){
i=$(this).data("value")
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
</script>
css:
#main{ float:left; width:100%;}
#wrapper{margin:0 auto; width:986px;}
#header{float:left; width:946px; padding:0 20px;}
#header .top_section{float:left; height:200px; width:100%; background-image: url("../images/header_bg.png");}
#header .top_section .logo{float:left; width:285px; padding:30px 0 0 20px;}
#header .top_section .logo a{float:left; width:auto;}
#header .top_section .logo a img{float:left;}
#header .top_section .logo span{
float:left;
width:100%;
font-size:18px;
line-height:15px;
color:#e6f5ff;
text-transform:uppercase;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#header .top_section .logo strong{
float:left;
width:100%;
font-size:24px;
line-height:15px;
color:#33adff;
padding:10px 0;
text-align:left;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-style: italic;
}
#header .top_section img{display: inline; float:right; max-height:200px; width:auto;}
#header .menu{float:left; width:100%; height:32px; background-color:#33adff;}
#header .menu ul{float:left; width:auto; list-style:none;}
#header .menu ul li{float:left; width:auto; padding:0 45px; display:inline; font-size:15px; line-height:2px; text-shadow:1px 1px 1px #580202; text-transform:uppercase;}
#header .menu ul li a{float:left; width:auto; color:#fff; text-decoration:none;}
#header .menu ul li a:hover{text-decoration:underline;}
#body_container{display: table; width:902px; margin: 0 auto; border:2px solid lightgrey; }
#body_container .left_container{float:left; margin: 10 auto; padding:0 10px; border:2px solid black; border-color:#33adff; width:20%; height:488px;}
#body_container .left_container img{display:block; width: 75%; padding-left:20px;}
#body_container .left_container ul{float:left; width:auto; list-style:none;}
#body_container .left_container ul li{display:block; padding-left:20px;}
#body_container .left_container ul li a{float:left; width:auto; color:#33adff; text-decoration:none;}
#body_container .left_container ul li a:hover{text-decoration:underline;}
#body_container .left_container h3{display:block; text-align: center; float:left; width:100%;font-size:22px;color:#33adff;font-style:normal;font-family:Arial, Helvetica, sans-serif;font-weight: bold;}
#body_container .right_container{float:right; padding:0 10px; width:70%;}
#body_container .right_container .top_section{display:block; height:30px;}
#body_container .right_container .bottom_section{display:block;}
#body_container .right_container .top_section img{float:left;}
#body_container .right_container .top_section h4{
text-align:center;
font-size:18px;
line-height:10px;
color:#33adff;
}
#body_container .right_container .bottom_section h3{
float:left;
width:100%;
font-size:22px;
color:#33adff;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
}
#body_container .right_container .bottom_section article{float:left;width:auto; padding:0 10px 0 10px;}
#body_container .right_container .bottom_section h5{float:left; width:auto; padding:0 0 0 20px;}
#body_container .right_container .bottom_section img{display:inline; padding-left:20px; padding-top:20px;}
#body_container .right_container .bottom_section h6{
float:left;
width:100%;
font-size:17px;
color:#33adff;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
padding:8px 0;
font-weight: bold;
}
#footer{float:left; width:946px; padding:0 20px;}
#footer .top_section{float:left; width:100%; height:32px; background-color:#33adff;}
#footer .top_section span{color:white; float:left; padding-top:4px; padding-left: 20px;}
#footer .bottom_section{float:left; width:100%; background-color:#000000}
#footer .bottom_section span{color:white; float:right; padding: 30px 20px 10px 10px;}
.darkgrey_div{display: inherit; border:2px solid darkgrey; width: 98%; height: 98%;}
.grey_div{display: inherit; border:2px solid grey; padding:0 20px; width: 894px; height: 98%;}
.grey_line{float:left; width:100%; height:2px; display:block; background-color:grey;}
.white_line{float:left; width:100%; height:2px; display:block; background-color:white;}
.clear{padding-bottom:15px;}
index.html:
<html><head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Test Site</title>
<link href="common/css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
margin-bottom: 0px;
background-repeat: repeat;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="header">
<div class="top_section">
</div>
<div class="white_line"></div>
<div class="grey_line"></div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#" data-value="software.html">Software</a></li>
</ul>
</div>
<div class="grey_line"></div>
<div class="white_line"></div>
</div>
<div id="body_container">
<div class="darkgrey_div">
<div class="grey_div">
<div class="left_container">
<div id="menu">
<h3>Home Links</h3>
<ul>
<li><a href="#" data-value="about.html">About</a></li>
</ul>
</div></div>
<div class="right_container">
<div class="top_section">
<h4>Test Site.</h4>
</div>
<div id=bottom_section class="bottom_section">
<h3>Welcome</h3>
<article>Welcome to test site.</article>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="white_line"></div>
<div class="grey_line"></div>
<div id="label" class="top_section">
<span>Main</span>
</div>
<div class="grey_line"></div>
<div class="white_line"></div>
<div class="bottom_section"><span>Test Site.</span></div>
</div>
</div>
</div>
<script>
$("#header .menu ul li a").click(function(){
i=$(this).data("value")
$("#menu").load(i+" #menu > *");
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
$("#body_container .left_container ul li a").click(function(){
i=$(this).data("value")
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
</script>
</body>
</html>
about.html:
<html>
<div id="bottom_section">
<h3>About test</h3>
<article>Test article about us.</article>
</div>
<div id="label"><span>About</span></div>
</html>
software.html
<html>
<div id="menu">
<h3>Software Links</h3>
<ul>
<li><a href="#" data-value="software.html">Software</a></li>
<li><a href="#" data-value="cloud.html">Cloud</a></li>
</ul>
</div>
<div id="bottom_section">
<h3>Software</h3>
<article>Software Test page.</article>
</div>
<div id="top_section"><span>Software</span></div>
</html>
cloud.html
<html>
<div id="bottom_section">
<h3>Cloud</h3>
<article>
Stuff on Cloud stuff.
</article></div>
<div id="label"><span>Cloud</span></div>
</html>
I found the answer myself hidden in the details about which functions interact with the DOM and which do not in regards to dynamically loading content. .on() is required because it allows for interaction with the DOM for dynamically loaded content. .click() does not work with the DOM from dynamically loaded content.
<script>
$(document).on('click','#body_container .left_container #menu ul li a',function(){
i=$(this).data("value");
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
$(document).on('click','#header .menu ul li a',function(){
i=$(this).data("value");
$("#menu").load(i+" #menu > *");
$("#bottom_section").load(i+" #bottom_section > *");
$("#label").load(i+" #label > *");
});
</script>