在 PJAX 页面加载后锚点点击甚至没有触发答案

【问题标题】：Anchor click even not firing after PJAX page load在 PJAX 页面加载后锚点点击甚至没有触发
【发布时间】：2014-05-01 03:23:51
【问题描述】：

我在搞乱一个网站时遇到了一个非常奇怪的问题，我无法弄清楚可能出了什么问题。我在网站上使用 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 页面然后尝试单击页面，它不会工作。

【问题讨论】：

标签： javascript web pjax

【解决方案1】：

罗斯-

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

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

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

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

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

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

【讨论】：