PJAX页面加载后，锚点点击事件不触发

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的内容时，就会触发警报，当我期望它（即在链接单击时）看到该警报。

我有一个顶部导航栏（一个Bootstrap导航栏），最初我一直在努力跟踪哪个导航栏项目将被标记为活动状态。我使用以下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，我最先在我的关于页面上发现了这个问题。（正如你显然看到的那样，该网站仍在建设中。）如前所述，直接访问关于页面并单击链接将起作用，但如果您导航到关于页面，然后尝试单击页面中的链接，它将无法工作。

- Ross Hays

Answer 1

Ross-

我曾经遇到过类似的问题，我知道如何解决；这个脚本没有绑定到新元素上，因为它没有在加载新元素后重新运行。

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

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

您需要添加更多的$.getScript调用来加载其他所需的javascript/jQuery，以便启用您想要发生的事件。（例如：您可能需要重新加载jQuery）

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

*请注意：如果您正在使用Twitter Bootstrap，请勿使用$.getScript重新调用bootstrap脚本，因为它会在每次重新加载时自我取消。

- Mussser