Question

对于我正在搞乱的网站，我遇到了一个非常奇怪的问题，我无法绕过可能出错的网站。我在网站上使用PJAX，身体中有一个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重新加载回到该页面然后点击链接将不会激活我的活动。
将测试类添加到我的一个锚点然后将某个事件与该类关联起来会遇到同样的问题。

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

提前谢谢！

P.S。：有问题的网站是我正在处理的个人网站，链接是http://rosshays.me，我首先注意到的网页是about page。（该网站正在进行中，因为您可以清楚地看到。）如上所述，直接转到about页面并单击该链接将起作用，但如果您导航到about页面然后尝试单击链接在页面中，它将无法正常工作。

Answer 1

罗斯 -

我有类似的问题，我知道如何解决这个问题;此脚本未绑定到新元素，因为一旦加载它们就不会在新元素上重新运行。

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

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

为了启用您想要发生的事件，您必须为所需的任何其他javascript / jQuery添加更多$.getScript次调用。（例如：您可能需要重新加载jQuery）

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

*有一点需要注意：如果您使用的是Twitter引导程序，请不要使用$.getScript重新调用引导程序脚本，因为它会在每次重新加载时自行取消。

在PJAX页面加载后，锚点击甚至不会触发

1 个答案: