个人博客 地址:http://www.wenhaofan.com/article/20180913220425

介绍

在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jquery的初始化方法,包括一些插件的初始化方法。

查看源码后发现该jquery.pjax替换容器内容时,是将服务器端返回的html转换为了jquery dom节点然后再执行的替换,但是这样操作会导致一系列的加载事件不会被触发,导致例如jquery和layui的初始化方法不会被执行。

于是决定将添加dom节点修改为直接添加html片段。

修改代码

1.将jquery.pjax.js中311行的 context.html(container.contents)修改为 context.html(data)。

这样在pjax加载新页面的时候便会直接将服务器端返回html片段添加进容器。

但是这样仅处理了新增页面,而执行回退操作时pjax会从缓存中读取上一个页面的内容,同样pjax在回退上一个页面的时候依然是以dom节点的方式存储和添加的,所以我们还需要继续修改。

2.

将365行的

    cachePush(pjax.state.id, [options.container, cloneContents(context)])
    修改为
  cachePush(pjax.state.id, [options.container, context.html()])

到此修改完成,此时使用pjax加载新页面的时候,layui jquery等插件的初始化方法即可正确执行。

解决pjax加载页面不执行js插件的问题的更多相关文章

  1. 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  2. 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  3. ExtJS 4.1 TabPanel动态加载页面并执行脚本【转】

    ExtJS 4.1 TabPanel动态加载页面并执行脚本 按照官方示例,可以动态加载页面,可是脚本不执行,于是查SDK.google,发现scripts需要设置为true,于是设置该属性,整个代码如 ...

  4. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  5. jquery动态加载并解决被加载页面js失效问题

    代码布局结构分为 header  left  content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...

  6. 如何实现加载DOM时执行js代码

    有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件, ...

  7. angular先加载页面再执行事件,使用echarts渲染页面

    剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...

  8. Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)

    Android中使用WebView, WebChromeClient和WebViewClient加载网页   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...

  9. 图片加载完毕后执行JS代码

    $("#img").load(function(){...}); 这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执 ...

随机推荐

  1. 最新咕咆+鲁班+图灵+享学+蚂蚁+硅谷+源码 Java架构师资料《Java架构师VIP课程》

    最新的Java架构师完整资料,完整视频+源码+文档. 每一套都是一百多个G的资料,无密. JAVA架构师全套课程 咕泡学院互联网架构师第一期 咕泡学院互联网架构师第二期 咕泡学院互联网架构师第三期 博 ...

  2. Ubuntu安装C#语言开发环境

    使用Bash自动化安装 先下载Bash脚本(Linux/macOS),运行脚本 ./dotnet-install.sh -c Current 或者使用包管理器安装 wget -q https://pa ...

  3. .Net框架的模块代码生成器--其三(dotnet tool指令的参数)

    别人已经写好了一个这种处理指令参数的库,我们这里是使用别人的库来实现规范的指令系统 继续上一篇的gfile或者新建一个.Net Core控制台程序也可以 1.安装nuget包,程序包管理器控制台运行 ...

  4. 查看deepin操作系统版本命令

    cat   /proc/version cat /etc/debian_version cat  /etc/os-release lsb_release -a uname -a uname -r sc ...

  5. SWIG 3 中文手册——10. 参数处理

    目录 10 参数处理 10.1 typemaps.i 库 10.1.1 引言 10.1.2 输入参数 10.1.3 输出参数 10.1.4 输入 / 输出参数 10.1.5 使用不同的名称 10.2 ...

  6. urlencode($url):把url转义,当字符串数据以url的形式传递给web服务器时,字符串中是不允许出现空格和特殊字符串的

    1.对url进行编码转义

  7. redis缓存优化

    redis缓存优化 一.问题 在Javaweb项目中,如果每次刷新,所有资源都重新从数据库中读取,这样每次效率会很低,在这里可以使用redis非关系型数据库,将一些不经常变化得资源加载进内存中.提高效 ...

  8. SQL Server无备份误删数据的恢复

    在正式生产数据库中,因为客户现场管理不规范产生了一条错误数据,由于自身睡眠不佳加上客户方言表达,将编号记错,在没有备份的情况下,直接连远程数据库执行了delete操作. 由于备份设置的是每日0点,当天 ...

  9. opencv —— copyMakeBorder 扩充图像边界

    扩充图像边界:copyMakeBorder 函数 在图像处理过程中,因为卷积算子有一定大小,所以就会导致图像一定范围的边界不能被处理,这时就需要将边界进行适当扩充. void copyMakeBord ...

  10. discuz!ml-3.x版本getshell

    影响范围: discuz! ml v3.x全版本. 产生原因 漏洞原因:Discuz!ML 系统对cookie中的l接收的language参数内容未过滤,导致字符串拼接,从而执行php代码. 利用ex ...