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失效（转）的更多相关文章

  1. jquery mobile转场时加载js失效

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  2. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  3. jQuery Mobile 手动显示ajax加载器，提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  4. jQuery Mobile 手动显示ajax加载器

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  5. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  6. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  7. jquery的ajax提交时“加载中”提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){    $("#loading").ajaxStart(function(){    ...

  8. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  9. JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. 在VS 2015 RTM 版中 提示 未能正确加载 NuGetPackage包

      在原来的项目中曾经启用了Nuget在编译时还原包功能.这样就会在 *.sln在平行目录生成 一个.Nuget文件夹, 删除了它,就好了.   我分析原因是, VS 2015 使用的是 NugetP ...

  2. Myisam and InnoDB

    MyISAM引擎的特点: 1.堆组织表:2.不支持事务:3.数据文件和索引文件分开存储:4.支持全文索引:5.主键索引和二级索引完全一样都是B+树的数据结构,只有是否唯一的区别(主键和唯一索引有唯一属 ...

  3. 【extjs】 extjs5 Ext.grid.Panel 搜索示例

    先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...

  4. 带Cookie的 WebClient

    /// <summary> /// WebClient的扩展 /// </summary> public class webClient : WebClient { /// & ...

  5. Hibernate3回顾-2-相关概念

    2.几个概念 HIbernate简要的体系结构如下图所示 通过上图能够发现HIbernate需要一个hibernate.properties文件,该文件用于配置Hibernate和数据库连接的信息.还 ...

  6. [转]PO和VO、关于延迟加载（lazy）和强制加载（Hibernate.initialize(Object proxy) )

    摘自http://www.cnblogs.com/kelin1314/archive/2009/11/13/1602778.html PO和VO PO 即Persistence Object VO 即 ...

  7. Lumen 设置 timezone 时区

    Lumen 设置 timezone 时区 2015-06-19| wid| 后端开发 今天用 Lumen 框架写代码时, 也是初次体验 Lumen, 遇到了一个问题, 从数据库里查出的时间比数据库里保 ...

  8. 【linux磁盘分区--格式化】fdisk，parted，mkfs.ext3

    磁盘分区完成后,一般就需要对分区进行格式化 磁盘分区命令主要有两个: fdisk :最大支持不超过2T分区: parted :支持GPT,适用于大容量分区: 分区指令的选择: 在RHEL系统上,用fd ...

  9. IntelliJ IDEA中如何设置同时打开多个文件且分行显示？

    Window→Editor Tabs→Tabs Placement→Show Tabs in Single Row 取消选中后即可在多行显示 下图为实际显示效果:  还可以自行设置打开文件窗口数(默认 ...

  10. SSL证书在线工具

    证书在线工具 如果您是第一次申请SSL证书,如果您对您的服务器如何使用SSL证书还不熟悉的话,我们推荐您使用本套工具,本套工具支持所有SSL服务器证书格式和各种WEB服务器.帮助您在线生成CSR文件, ...