pjax加载使js失效原因及解决

pjax是什么

简单点说，pjax是一个jquery开源的加载组件，它通过ajax和pushState技术提供无需刷新的体验，同时改变了浏览器的url地址，这就解决了ajax饱受批评的缺点——用户无法前进和后退，pjax加载是用户体验大幅度提升，主要在于页面引入的js和css不需要再次引入，其次是如果配置了pjax，不用全局加载页面，可以局部加载。

pjax使部分js失效的原因

原因其实很方便理解，因为pjax一般来说是通过服务端获取html的dom并渲染，而js并不会重新加载，这导致一些根据dom元素加载的js有问题，比如mathjax，lightjs等，都是根据内容的形式来渲染，一般会存在一个init()函数，但是pjax请求不会重新执行init()，从而导致js失效

解决办法

pjax都存在不同阶段的回调函数，这时我们只要在回调函数里写出自己想要重新调用的代码就可以了

function init() {
    $.getScript("https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML", function () {
    var math = document.getElementsByClassName("entry-content")[0];
    MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
            inlineMath: [
                ["$", "$"]
            ], //行内公式选择$
            displayMath: [
                ["$$", "$$"]
            ], //段内公式选择$$
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] //避开某些标签
        },
        "HTML-CSS": {
            availableFonts: ["STIX", "TeX"], //可选字体
            showMathMenu: false //关闭右击菜单显示
        }
    });
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, math])
})
}
...
$(document).on('pjax:complete', function() {
    init();
})

因为我是存在mathjax的js存在问题，所以我以此为例子来说明如果解决问题