title: jQuery .load() and sub-pages
body: <p>I am not just a newbie with Javascript. I am developing a simple site to get my hands on web programming. The web site is simple and structure is like this:</p>
  
  <ol>
  <li>A simple ul/li/css based navigation menu</li>
  <li>Sub pages are loaded in "div" using jQuery, when ever user click appropriate menu item.</li>
  <li>Some of the sub-pages are using different jQuery based plugins such as LightWindow, jTip etc.</li>
  </ol>
  
  <p>The jQuery function that loads the sub-page is like this:</p>
  
  <pre><code>function loadContent(htmlfile){
      jQuery("#content").load(htmlfile);
  };
  </code></pre>
  
  <p>The menu items fires loadContent method like this:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="javascript:void(0)" onclick="loadContent('overview.html');return false"&gt;overview&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>This loads a sub-page name "overview.html" inside the "div".</p>
  
  <p>That's it.</p>
  
  <p>Now this is working fine but some of the sub-pages using jQuery based plugins are not working well when loaded inside the "div". If you load them individually in the browser they are working fine.</p>
  
  <p>Based on above I have few qustions:</p>
  
  <ol>
  <li><p>Most of the plugins are based on jQuery and sub-pages are loaded inside the "index.html"
  using "loadContent" function. Do I have to call</p>
  
  <p><code>&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;</code></p>
  
  <p>on each and every sub-page?</p></li>
  <li><p>If a page is using a custom jQuery plugin, then where do I call it? In "index.html" or on the page where I am using it?</p></li>
  <li><p>I think whatever script you will call in "index.html", you don't to have call them again in any of the sub pages you are using. Am I right here?</p></li>
  </ol>
  
  <hr>
  
  <p>All my sub-pages are similar to this one:
  This is screenshot.html. Working fine when I load locally in a browser but not working when loaded using jQuery's load() function inside "index.html"</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"&gt;
  
      &lt;head&gt;
          &lt;script type='text/javascript' src='js/prototype.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src='js/scriptaculous/scriptaculous.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src='js/lightview.js'&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/lightview.css" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h3 style="text-align:left;"&gt;Screenshots&lt;/h3&gt;
  
          &lt;div align="center"&gt;
              &lt;a class="lightview" href="images/ss_win1.png" title="Title"&gt;&lt;img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/&gt;&lt;/a&gt;
              &lt;a class="lightview" href="images/ss_win2.png" title="Title"&gt;&lt;img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/&gt;&lt;/a&gt;
              &lt;a class="lightview" href="images/ss_win3.png" title="Title"&gt;&lt;img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>