手机扫码 继续浏览

解决pjax加载页面不执行js插件的问题

摘要: 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jquery的初始化方法,包括一些插件的初始化方法。 查看源码后发现该jquery.pjax替换容器内容时,是将服务器端返回的html转换为了jquery dom节点然后再执行的替换,但是这样操作会导致一系列的加载事件不会被触发,导致例如jquery和layui的初始化方法不会被执行。 于是决定将添加dom节点修改为直接添加html片段。

介绍

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

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

于是决定将添加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等插件的初始化方法即可正确执行。

原文出自[ 范文皓的个人博客 ] 原文链接: http://www.autu.live/article/20180913220425

发布评论

欢迎回来
修改信息
回复邮件通知

暂无评论