title: how to load pages with ajax
body: <p>When I click my links to load the new page in the designated div with ajax the jquery effect on the div fires off and displatys the same information. i have external .html files made and the java script is set up to load all pages in the #content div. </p>
  
  <blockquote>
  <pre><code>&lt;ul id="navigationMenu"&gt;
      &lt;li&gt;
        &lt;a class="home" href="index.html"&gt;
              &lt;span&gt;Home&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a class="about" href="about.html"&gt;
              &lt;span&gt;About&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
         &lt;a class="services" href="services.html"&gt;
              &lt;span&gt;Services&lt;/span&gt;
           &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a class="portfolio" href="portfolio.html"&gt;
              &lt;span&gt;Portfolio&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a class="contact" href="contact.html"&gt;
              &lt;span&gt;Contact us&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  
  $(document).ready(function() {
  
    var hash = window.location.hash.substr(1);
    var href = $('#navigationMenu li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });
  
    $('#navigationMenu li a').click(function(){
  
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  
        $(function () {
      $("li", "#navigationMenu").click(function (event) {
          var url = $(this).attr("href"),
              hash = url.replace(".html", ""),
              content = $("#content");
  
          content.html("&lt;p&gt;Loading...&lt;/p&gt;");
  
          $.ajax({
              url : url,
              dataType : "html",
              success : function(data){
                  content.find("p").fadeout(function(){
                      content.find("p").html(data);
                      window.location.hash = hash;
                  });
              }
          })
          event.preventDefault();
      });
  });
  
  
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
  
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
  
  
  
    });
  
  });
  </code></pre>
  </blockquote>