jquery mobile转场时加载js失效
jquery mobile拦截了所有的http请求，并使用ajax请求取代传统的http。请求发出后，框架会将请求的内容插入到页面中data- role="page"的部分，取代原来的内容。因而如果请求的新页面在head部分加载了其他的js，此时框架并不会加载该部分的js。
这就意味着head部分的js和css在绝大部分情况下并不会被加载并执行，通常情况下建议所有页面使用一套统一的js和css。但如果应用的复杂度较高或者为分工合作开发时，我们需要根据不同的页面加载不同的js或样式，这时候可以使用jquery mobile提供的pagecreate方法解决该问题。
我们知道在使用jquery框架时，我们习惯使用
$(document).ready(function(){
// do something
})
但这个方法在jquery mobile中，因为jquery mobile特殊的请求机制（ajax请求），很多时候并不能达到我们希望的功能。jquery mobile提供了pagecreate的事件。
下面我们可以通过一个简单的例子，使用pagecreate实现不同page加载不同js的功能：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header">
<h1>page one header</h1>
</div>
<div data-role="content">
<p>page one content</p>
<a href="#pageTwo">page two</a>
</div>
<div data-role="footer">
<p>page one footer</p>
</div>
</div><!-- /pageOne -->
<div data-role="page" id="pageTwo">
<div data-role="header">
<a data-rel="back">back</a>
<h1>page two header</h1>
</div>
<div data-role="content">
<p>page two content</p>
</div>
<div data-role="footer">
<p>page two footer</p>
</div>
</div><!-- /pageTwo -->
<script>
$(document).on("pagecreate", "#pageOne", function(){
alert("page one create");
});
$(document).on("pagecreate", "#pageTwo", function(){
alert("page two create");
});
</script>
</body>
</html>
这样，页面在一开始渲染时，只会执行 alert("page one create"); 当a标签跳转到pageTwo时才会执行：alert("page two create");
当然还有其他解决方法，比如在a标签上加上如:data-ajax='false',rel='external',只是这样做的话转场效果会失效。
而如果使用上面我介绍的这种方法的话，JS失效也可以解决，转场也可以。
如果大家有更好的解决方法，欢迎提出，互相学习。
jquery mobile转场时加载js失效的更多相关文章
- jquery mobile转场时加载js失效（转）
jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- jQuery Mobile 手动显示ajax加载器，提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- jQuery Mobile 手动显示ajax加载器
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- jquery Mobile点击显示加载等待效果
点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
- jquery的ajax提交时“加载中”提示的处理方法
方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){ $("#loading").ajaxStart(function(){ ...
- jquery的ajax提交时加载处理方法
1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...
- JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
随机推荐
- 获取当前页面的完整URL
PHP实现 #测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."< ...
- HTML&CSS基础学习笔记1.5-添加常用标签
代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- SQL语句中的乘号
在ADO中,我们需要在SQL语句中使用乘法运算,可是添加'*'以后执行程序总是会出错,这是因为‘*’与sql中的‘*’关键字重合了,所以编译会出错. 解决办法:将乘法运算放到sql语句外面,将结果放入 ...
- Activiti工作流学习-----基于5.19.0版本(7)
八.BPMN 2.0流程图详解 BPMN 2.0的标准的出现是好事,用户不在被某个工作流开发商绑架或者在工作流中开发妥协,Activiti作为BPMN标准的一套解决方案,使得用户在选择工作流框架时可以 ...
- 2016年最受欢迎中国开源软件TOP 20
开源软件对程序员来说是一个经常接触的软件,作为一个经常接触的软件,当然想知道自己用的软件受欢迎程度,基于此,开源中国在近日公布“2016年度最受欢迎中国开源软件评选”结果,在TOP20榜单中,前5名分 ...
- m2eclipse插件安装
一.给Eclipse安装maven的插件 m2eclipse 1 打开eclipse 2 Help -->Eclipse MarketPlace,在打开的界面搜索框中输入maven查找m2ecl ...
- ASP.NET中默认的一级目录
默认一级目录结构: /Controllers – 存放负责处理 存放负责处理 URL请求的控制器类: 类:/Models – 存放表示和操纵数据以及业务对象的类: /Views – 存放负责呈现输出内 ...
- 如何用VS2010打开VS2012编辑的项目
找到打开项目的开始图标:,右键点击,选择有文本编辑器打开,用下面的语句将文件里面的前两句替换掉.Microsoft Visual Studio Solution File, Format Versi ...
- #ifdef __cplusplus extern "C" {代码} 倒底是什么意思？
时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus extern "C" { #endif //一段代码 #ifdef __cplusplus } # ...
- Linux系统下C++开发工具-远程终端软件使用
通过前面安装Linux系统介绍,紧接着进入搭建Linux开发环境的第二步,选择C++开发工具,以及必要的客户端软件.从而完整的搭建一个Linux下C++开发的环境,便于初学者在该环境下能够很好的学习. ...