javascript - PJAX 页面加载后 anchor 击甚至不触发

Question

我正在搞乱的网站遇到了一个非常奇怪的问题，我无法理解可能出了什么问题。我在网站上使用 PJAX，并且在我的 body 中有一个 ID 为 #page-contents 的 div。

我用来设置 PJAX 的代码如下...

<script type="text/javascript">
    $(function(){
        $(document).pjax('a', '#page-contents', {
            fragment: '#page-contents',
            timeout: 2000
        });
    });
</script>

我知道设置是正确的，因为我编辑了 PJAX 文件以在它换出我的 #page-contents div 的内容时触发警报，并且我确实看到了该警报期望(即点击链接)。

我在顶部有一个导航栏(一个引导导航栏)，我最初无法跟踪哪个导航栏项目将被标记为事件。我已经使用以下 javascript 代码解决了这个问题。

<script type="text/javascript">
    $("a").click(function() {
        $(".navbar-nav li").removeClass("active");

        var nextPage = $(this).attr("href");
        nextPage = nextPage.substring(nextPage.indexOf(window.location.hostname) + window.location.hostname.length);
        switch(true) {
            case nextPage == "/about":
                $("#about-nav").addClass("active");
                break;
            case nextPage == "/contact":
                $("#contact-nav").addClass("active");
                break;
            case nextPage == "/resume":
                $("#resume-nav").addClass("active");
                break;
            case nextPage.indexOf("/projects") != -1:
                $("#projects-nav").addClass("active");
                break;
            default:
                break;
        }
    });
</script>

这适用于我在导航栏中的所有链接，但我发现我在 #page-contents div 中的任何链接都不会触发我上面的脚本。我知道 PJAX 在页面更改和我插入的警报显示时仍在工作。

我在自己的测试中发现的一些事情:

• 我还发现，如果我直接加载一个包含非导航栏链接的地址，然后单击该链接，它就会起作用。但是通过 pjax 重新加载返回该页面然后单击链接不会触发我的事件。
• 将测试类添加到我的一个 anchor ，然后将某个事件与该类相关联会遇到同样的问题。

有人知道为什么我的脚本无法执行吗？或者，也许我只是遗漏了一些明显的东西。

提前致谢!

P.S.:该网站是我正在做的个人网站，链接是http://rosshays.me , 我第一次注意到这个的页面是我的 about page . (您会清楚地看到，该站点正在 build 中。)如前所述，直接转到“关于”页面并单击链接即可，但是如果您导航到“关于”页面，然后尝试单击页面，它将不起作用。

Answer 1

罗斯-

我遇到了类似的问题，我知道如何解决；此脚本未绑定(bind)到新元素，因为它不会在新元素加载后重新运行。

请将您的函数放在外部 .js 文件中。完成后，您可以将此脚本添加到标题中:

$(document).on('pjax:complete', function() {
            $.ajaxSetup({ cache: true});
            $.getScript("YOUR SCRIPT FILE PATH HERE', true);?>");                           
            });

您必须为任何其他需要的 javascript/jQuery 添加更多的 $.getScript 调用，以便启用您想要发生的事件。 (例如:您可能需要重新加载 jQuery)

这会将 jquery 和 javascript 重新应用到通过 PJAX 加载的新元素。

*需要注意的一件事:如果您使用的是 Twitter Bootstrap ，请不要使用 $.getScript 重新调用 Bootstrap 脚本，因为它会在每次重新加载时自行取消。