I'm trying to load a page using the .load(url) from an already loaded page, but nothing responds. Below is a simple sample page created to show what I want to accomplish. Also, I'm using JQuery 1.3.
----- index.html ----- <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#mainview").load("page01.html"); $("#clickme").click(function(){ $("#mainview").load("page02.html"); }); $("#clickme2").click(function(){ $("#mainview").load("page03.html"); }); $("#clickme3").click(function(){ $("#mainview").load("page04.html"); }); }); </script> </head> <body> <div id="mainview"></div> </body> </html> ----- END of index.html ----- ----- page01.html ----- <html><head></head><body> <p>This is page01.html</p> <div id="clickme">Click Me!</div> <p>some stuffs</p> </body> </html> ----- END of page01.html ----- ----- page02.html ----- <html><head></head><body> <p>This is page02.html</p> <div id="clickme2">Click Me!</div> <p>some more stuffs again</p> </body> </html> ----- END of page02.html ----- ----- page03.html ----- <html><head></head><body> <p>This is page03.html</p> <div id="clickme3">Click Me!</div> <p>some more stuffs again</p> </body> </html> ----- END of page03.html ----- When the index.html page loads up, the page01.html loads into #mainview. And when I try to click on the <div id="clickme">Click Me!</div> inside page01.html to load page02.html, nothing works. Just can't figure out what's wrong... If someone knows an easy trick, please help me out. Thank You!