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. input 不支持HTML5的placeholder属性

    解决方法如下: <input type="text" value="搜索乐高资讯" onfocus="if(this.value=='搜索乐高资 ...

  2. 万维网发布服务(w3svc)已停止，除非万维网发布服务(w3svc)正在运行。

    近来遇到一个IIS服务启动问题,重启服务器PC后,网站启动的时候,提示“ 万维网发布服务(w3svc)已停止,除非万维网发布服务(w3svc)正在运行”. 解决方法: 点击"开始" ...

  3. C语言格式化输入输出函数

    一:格式输出函数printf() 1.调用形式一般为:printf("格式化控制字符串",输出表列): 2.格式化控制字符串用于指定输出格式,它有三种形式: 1.格式说明符:规定了 ...

  4. 使用jquery 操作checkbox

    checkbox 的全选与全不选以及获取选择的值. 效果: <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 测试一下PHP官方的新一代PHP加速插件ZendOpcache的性能及配置

    过程不表,都比较顺利 参考如下URL: http://www.lvtao.net/server/ZendOpcache.html 大家知道目前PHP的缓存插件一般有三个:APC.eAccelerato ...

  6. Codeforces 4D Mysterious Present

    http://codeforces.com/contest/4/problem/D 题目大意: 给出n个信封,这n个信封有长和宽,给出卡片的尺寸,求取能够装入卡片的最长的序列,序列满足后一个的长和宽一 ...

  7. 【转】深入理解Android的startservice和bindservice--不错

    原文网址:http://www.cnblogs.com/yejiurui/p/3429451.html 一.首先,让我们确认下什么是service?         service就是android系 ...

  8. NOI2012 美食节

    http://www.lydsy.com/JudgeOnline/problem.php?id=2879 费用流. 我们发现,每个厨师做的倒数第k道菜对总等待时间的贡献为k*做这道菜的时间. 将每个厨 ...

  9. 在Visual Studio 2013中编译libssh2项目

     一. 下载需要的外部包,并解压,下面给出的链接如果无法访问,就google搜索下载一下: •下载openssl •下载zlib 二.修改libssh2项目配置: 1.C/C++->Gene ...

  10. struct2（四）编写Struct2 的Action

    简介: 1.映射一个Action到一个类上面 2.把结果返回到view展示 3.编写Action对应的控制逻辑   1. Action Mapping <action name="he ...