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. 解决：错误 14274: 无法添加、更新或删除 SQL 服务器上的作业的问题一例

      今天在修改 SQL服务器上 以前的作业任务,打算把作业的执行时间修改成新的时间,结果修改好点确定, 结果出现了以下错误! --------------------------- Microsoft ...

  2. mybatis migrate常用指令

    0.制定db和配置文件 --path=xxx --env=dev 1.初始化Migrations工作目录 migrate init 2.创建数据库变更 migrate new "liyq a ...

  3. Spring Data Solr教程（翻译） 开源的搜索服务器

    Solr是一个使用开源的搜索服务器,它采用Lucene Core的索引和搜索功能构建,它可以用于几乎所有的编程语言实现可扩展的搜索引擎. Solr的虽然有很多优点,建立开发环境是不是其中之一.此博客条 ...

  4. SpringMVC的各种参数绑定方式

    1. 基本数据类型(以int为例,其他类似):2. 包装类型(以Integer为例,其他类似):3. 自定义对象类型:4. 自定义复合对象类型:5. List绑定:6. Set绑定:7. Map绑定: ...

  5. 简单了解ddos攻击

    1.一种为流量攻击,主要是针对网络带宽的攻击,即大量攻击包导致网络带宽被阻塞,合法网络包被虚假的攻击包淹没而无法到达主机: 2.另一种为资源耗尽攻击,主要是针对服务器主机的攻击,即通过大量攻击包导致主 ...

  6. RedHat5安装好后没有ip

    RedHat5安装好后,ifconfig查不到ip. 设置有问题.关闭虚拟机,点击下图所指,调出虚拟网络编辑器: 点击还原默认设置,应用,确定. 重启虚拟机,ifconfig,是不是查到ip了呢?

  7. for循环内 执行$ajax(){}

    真是郁闷,在for 循环里添加了ajax异步传输之后,for循环是单线程处理,就是里面执行的是ajax,也不异步处理数据.而是执行完for循环的次数后,一起把ajax的数据处理掉. 解决办法.分开吧! ...

  8. 预定义宏__GNUC__和_MSC_VER

    一.预定义__GNUC__宏 1 __GNUC__ 是gcc编译器编译代码时预定义的一个宏.需要针对gcc编写代码时, 可以使用该宏进行条件编译. 2 __GNUC__ 的值表示gcc的版本.需要针对 ...

  9. QueryRunner的API

    org.apache.commons.dbutils Class QueryRunner java.lang.Object org.apache.commons.dbutils.AbstractQue ...

  10. [系统集成] Android 自动构建系统

    一.简介 android app 自动构建服务器用于自动下载app代码.自动打包.发布,要建立这样的服务器,关键要解决以下几个问题: 1. android app 自动化打包android 的打包一般 ...