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

Question

这个想法是每个页面都有完全相同的页眉和页脚，但每个页面都有内部内容，这些内容会改变每个页面的加载

<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>

我已经根据我在某处看到的早期版本编写了此脚本，但是我遇到了没有脚本被触发的问题。网站的整体脚本都是在初始页面加载时加载的，我只需要每次单击链接时重新运行脚本，这样我就可以在页面内获得网站页面加载的无缝效果，并且在每个自定义页面加载时添加自定义 CSS 动画。

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;
});

我尝试在 ajax 完成时添加一个 .getscript block ，但我发现它开始使页面加载非常繁重并开始引发错误。

$(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" );
});

我错过了什么？

Answer 1

非常感谢啤酒醇，他让我走上了正确的方向。我不需要每次都从头部重新加载整个 javascript 堆栈；只是页脚中的 javascript。这一下子解决了很多问题。

编辑:我还发现，通过将其更改为“委托(delegate)”与 onclick，我不需要再次重新加载初始 ajax 脚本。非常方便，并且使页面保持简洁。

最终代码示例是这样的:

   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); })
});