构建一个Ajax系统以通过链接类加载新页面内容

Question

The idea is each page has the same header and footer exactly, but each page has inner content that will change each page load

<header>blah blah blah</header>
<div id="main-content">Changes Each Page, but with links like <a href="anotherpage.html" class="ajaxify">Go to Another Page with smooth animation</a></div>
<footer>blah blah blah</footer>

I have written this script based off an earlier version I saw somewhere, however I am having an issue where no scripts are being fired. The site's overall scripts are all loaded on the initial page load, and I just need the scripts to be re-run each time you click on a link, that way I can have the seamless effect of the site pages loading inside the page, and adding custom CSS animations when each custom page loads.

var newHash     = '',
   $mainContent = $('#main-content');

  $(".ajaxify").click(function(event) {
  event.preventDefault();
  newHash = $(this).attr('href');
  history.pushState(null, null, newHash);      
  $mainContent.load(newHash + " #main-content > *");
  return false;
});

I attempted to add a .getscript block when ajax is completed, but I found that it starts making the page loads really heavy and starts firing off errors.

$(document).on("ajaxComplete",function(){
    $.getScript( "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" );
    $.getScript( "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" );
    $.getScript( "../js/libraries.js" );
    $.getScript( "../js/footer.js" );
});

What am I missing?

Answer 1

Big thanks to beercohol, he set me on the right direction. I didn't need to reload the whole javascript stack from the head each time; just the javascript in the footer. This solved so many issues at once.

EDIT: I also discovered that by changing it to "delegate" vs onclick, I dont' need to reload the initial ajax script again. Very handy and keeps the pages light.

Final Code example is this:

   var newHash     = '',
   $mainContent = $('#main-content');

  $('body').delegate(".ajaxify", "click", function() {
  event.preventDefault();
  $("html, body").animate({ scrollTop: 0 }, 500);
  newHash = $(this).attr('href');
  history.pushState(null, null, newHash);
  $mainContent.delay(500).load(newHash + " #main-content > *");
  return false;
});
$(document).on("ajaxComplete",function(){
   jQuery.get('/js/footer.js', function(data) { eval(data); })
});

Answer 2

Assuming your scripts are loaded in your header, then you don't need to reload them with .getScript . That would just keep adding them into the page again for every link you click!

Your main function looks mostly correct - although it seems to be missing the first line - but the .load doesn't look quite right. Try something like this:

$(document).ready(function() {
    var newHash     = '',
    $mainContent = $('#main-content');

    $(".ajaxify").click(function(event) {
    event.preventDefault();
    newHash = $(this).attr('href');
    history.pushState(null, null, newHash);      
    $mainContent.load(newHash + ' #main-content');
    return false;
});