个人博客 地址: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. MySQL导出数据时提示文件损坏

    使用Navicat工具,优先将整个数据库的表和数据导出. 如果遇到文件损坏错误可以在表实例界面选中所有表,然后将表转储为SQL文件(结构和数据). 在目标数据库执行导出的SQL文件,导入结构和数据. ...

  2. Flink中逻辑计划和物理计划的概念划分和对应关系

    逻辑计划 logicGraph或者jobGraph,其端点为operator,edge为数据流向. operator往往代表一个函数. 同一个分区内的具有连续上下游关系的函数组成operator-ch ...

  3. JAVA 增删改查接口命名规范(dao层与 service 层

    开发时,有很多规范,这里写的是命名规范. Dao 接口命名   insert batchInsert selectOne selectById count selectList update dele ...

  4. java 企业站源码 兼容手机平板PC 自适应响应式 SSM主流框架 freemaker 静态引擎

    前台: 支持四套模版, 可以在后台切换   系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...

  5. beego orm的使用

    在使用beego model 去操作数据库时 有一些疑惑  找到了一个比较好的博文 原文地址 : https://my.oschina.net/u/252343/blog/829912 (Kelvin ...

  6. 1.泛型(Generic)

    一.泛型 泛型就是封装,将重复的工作简单化 1.泛型方法 public static void Show<T>(T tParameter) { Console.WriteLine(&quo ...

  7. Document节点

    概述 document节点对象代表整个文档,每张网页都有自己的document对象.window.document属性就指向这个对象.只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用. ...

  8. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  9. SpringBoot2.x-笔记(01)

    程序入口 @SpringBootApplication public class SpringbootApplication { public static void main(String[] ar ...

  10. Postman使用技巧

    Postman是什么 Postman是chrome的一款插件,用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便. Postman安装 官网下载(翻墙) ...