解决pjax加载页面不执行js插件的问题
个人博客 地址: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插件的问题的更多相关文章
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
解决HTML加载时,外部js文件引用较多,影响页面打开速度问题 通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
- ExtJS 4.1 TabPanel动态加载页面并执行脚本【转】
ExtJS 4.1 TabPanel动态加载页面并执行脚本 按照官方示例,可以动态加载页面,可是脚本不执行,于是查SDK.google,发现scripts需要设置为true,于是设置该属性,整个代码如 ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- jquery动态加载并解决被加载页面js失效问题
代码布局结构分为 header left content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...
- 如何实现加载DOM时执行js代码
有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件, ...
- angular先加载页面再执行事件,使用echarts渲染页面
剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...
- Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)
Android中使用WebView, WebChromeClient和WebViewClient加载网页 在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...
- 图片加载完毕后执行JS代码
$("#img").load(function(){...}); 这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执 ...
随机推荐
- 链接github
引用https://www.cnblogs.com/u-1596086/p/11588957.html 第一步:登录git创建项目 右上角头像按钮,点击your repositories 接着绿色按钮 ...
- 记一次Postgres CPU爆满故障
问题描述 公司项目测试环境调用某些接口的时候,服务器立即崩溃,并一定时间内无法提供服务. 问题排查 服务器配置不够 第一反应是服务器需要升配啦,花钱解决一切!毕竟测试服务器配置确实不高,2CPU + ...
- windows快捷键记录
-1: 装完iis, run -> inetmgr 弹出iis管理器 0.按住Shift键右击鼠标打开命令行窗口 1.ODBC数据源管理器run->odbcad32 2.计算机管理(查看设 ...
- Django的settings源码分析
Django其实有两个配置文件,一个是暴露给用户的可以自定义的配置,一个是项目默认的配置,用户如果配置了就用用户的,没有配置就用默认的. 首先需要在settings文件中导入,然后查看settings ...
- javaSE学习笔记(17)---锁
javaSE学习笔记(17)---锁 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相关源码(本文中的源码来自JDK 8).使用场景进行举例,为读 ...
- Phpstorm 2020-01-04试了可用的激活码【亲测可用】WebStrom
[直接点击试用30天] http://myphp.vip/ 测试时间:2018-10-12可用(v2019.2) 测试时间:2019-12-24可用(v2019.2) 测试时间:2020-01-04可 ...
- CSRF防护
CSRF防护 (待完善...)
- 线段树区间染色 ZOJ 1610
Count the Colors ZOJ - 1610 传送门 线段树区间染色求染色的片段数 #include <cstdio> #include <iostream> #in ...
- .net全栈开发-c#面向对象与工控自动化分拣上位机
一.前言 开始做了两年web.期间也整了一段时间winform.后来做了两年工控上位机,也就是做工控这两年发现机器跟面向对象真是如此贴切,也是我从处理数据和流程的思维转变为面向对象思维的开始.这对我后 ...
- Python中字符串的学习
Python中字符串的学习 一.字符串的格式化输出 % 占位符 %s 字符串 %d integer %x 十六进制 integer %f float 指定长度 %5d 右对齐,不足左边补空格 %-5d ...