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)