In my website i made a mainpage which has 3 divs: header, footer and main. Header div has some buttons which change main div. Means that page is loaded only once then i just change main div when some button is clicked. I simply put a html page in main div when some button is clicked.
i have put alert in every page’s $(document).ready function. Whenever main div is changed, these alerts should come because main div is a html page. But these alerts are not coming. Why is that so. I want to load some data every time when main div is changed. How can i do that? Thanks in advance.
main page:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
$("#main").load("page1.html");
});
$("#btn2").click(function(){
$("#main").load("page2.html");
});
});
</script>
</head>
<body>
<div id="header"> --- </div>
<div id="maincontent"><div id="main"> --- </div></div>
<div id="footer"> --- </div>
</body>
</html>
page1:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// trying to load data. but its not working
});
</script>
</head>
<body>
<div id="page1-div"> --- </div>
</body>
</html>
You are just making changes in DOM, not loading new document which would trigger $(document).ready();.
Based in questions tags, i assume that you are loading content using AJAX. In that case just use jQuery’s callbacks for $.ajax* functions to do any kind of action when content is loaded.