Question

/ Editted //

我试图让我的webapp在页面之间有一个很好的加载动画，并快速获取它们。当我点击链接时，它第二次中断。感觉好像脚本只允许自己在原始内容上运行，而不是新加载的远程内容。或者它可能只是在第一个链接和后退按钮上工作一次。我无法理解。

////////////// Change page function ///////////////////
function changePage(href){
    $('div#pre-loader').removeClass('hide');
    $('.page-content').addClass('hide');
    var newHref = href.replace(site_url, site_url+'/data');
    $.get(newHref, function(data){
        $('div.page-content').replaceWith(data);
        $('div#pre-loader').addClass('hide');
    });
}

///////////Link click///////////
$('a').click(function(e){
    if (Modernizr.history){
        if($(this).hasClass("internal-link")){
            e.preventDefault();
            var href = $(this).attr("href");
            history.pushState(null, null, href);
            changePage(href);
        }
    }
});
//////////// Back button ////////////
window.addEventListener('popstate', function(event) {
    newHref = site_url + location.pathname;
    changePage(newHref);
});

当我将/ data / part添加到url时，我的服务器只返回页面内容div中的内容，并且不再隐藏它。

修改实现了这个问题，似乎我已经加载的js（在app.js中，上面的代码所在的）没有在新加载的内容上运行。这是因为我保留了所有CSS和JS文件，并且只加载内容（使用extra / data /）。现在我已经尝试了谷歌搜索和搜索所有SO，似乎没有任何地方似乎解决这个问题。是否有任何简单的脚本可以包含在将重新加载js的所有/ data /文件中，还是有一种方法可以使我的脚本自动运行在新内容上？

history.pushState ajax内容，而不是在$ .get数据上重新运行js

0 个答案: