个人博客 地址: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. 聊聊GIS中的坐标系|再版 识别各种数据的坐标系及代码中的坐标系

    本篇讲讲在GIS桌面软件和实际数据中,以及各路GIS有关API的编程中,如何寻找坐标系信息.惯例: 本文约2000字,建议阅读时间10分钟. 作者:博客园/B站/知乎/csdn/小专栏 @秋意正寒 版 ...

  2. 返回一个整数数组中最大子数组的和——java程序设计

    一.题目要求 1.输入一个整形数组,数组里有正数也有负数.2.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.3.求所有子数组的和的最大值.要求时间复杂度为O(n) 二.设计思想 解决 ...

  3. 抖音快手短视频去水印API,接口开发文档

    开发者官网:http://api.lingquan166.com/ 简介:根据抖音.微视.小红书.皮皮搞笑等APP中复制出来的链接,解析获取短视频的标题.封面.无水印短视频地址等信息. 接口地址: h ...

  4. 原创: idea 的maven 方式配置 开发javaWeb(idea+tomcat +maven

    通过idea 编辑器来配置基于maven创建站点,在tomcat上配置 在采用idea 配置之前,首先要确保maven和 tomcat 正确运行. maven 配置链接 tomcat 配置链接 实际你 ...

  5. 想在don‘t starve中活的更久?那饥荒海难攻略你怎么能不知道!

    饥荒海难mac版是一款非常好玩的烧脑游戏.玩家将扮演一个勇敢的绅士科学家威尔逊,被一个恶魔困住并送到一个神秘的荒野世界,玩家必须利用异世界中的自然资源让自己存活下去,并且抵御各种异世界生物的威胁.想在 ...

  6. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  7. MAC安装MacPorts 卡在“正在运行软件包脚本”的解决办法

    MAC安装MacPorts 卡在"正在运行软件包脚本"的解决办法 点击右上角强制结束掉"安装器" 打开terminal, 输入命令"ps -ef | ...

  8. 如何开发自己的第一个 Serverless Component

    前言 上一篇 基于 Serverless Component 的全栈解决方案 介绍 Serverless Component 是什么和如何使用 Serverless Component 开发一个全栈应 ...

  9. 到底什么是.NET?

    ​.NET 概念比较庞大,本文只讨论基础知识,只用简单语言描述. 我们是NET程序员,但是我们有没有思考过到底什么是.NET ? 官方定义 .NET是微软推出来的一个致力于敏捷开发的软件框架. 大概2 ...

  10. JS中BOM操作知识点

    JS BOM window对象 全局变量和全局方法都归在window上 alert-comfirm-prompt 让alert .confirm等弹出框上的提示文字实现换行:\n // confirm ...