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块，但我发现它开始使页面加载非常繁重并开始触发错误。

$(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。这一次解决了很多问题。

编辑：我还发现通过将其更改为＆＃34;委托＆＃34; vs onclick，我不会＆＃39;需要重新加载初始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); })
});

Answer 2

假设您的脚本已加载到标题中，则无需使用.getScript重新加载它们。对于您点击的每个链接，只会再次将它们添加到页面中！

你的主要功能看起来大致正确 - 虽然它似乎缺少第一行 - 但.load看起来并不正确。尝试这样的事情：

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

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

2 个答案: