0

所以我有 2 页示例 page1.html 和 page2.html。从 page1 到 page2 有一个 href 链接。但似乎 page2.html 中的 javascript 被忽略并且没有被调用。（已准备好文件，正文加载无效）

那么jquery mobile是否只接受第一页上的javascripts？

调用 page2.html 后如何运行 javascript？

jquery mobile 的新手谢谢。

page2.html 上的示例代码类似于第 1 页：

    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
    <script src="js/jquery.-1.10.1.min.js"></script>
    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>   
    <body>
    HELLO WORLD
    </body>
    <script>

   $(function() {
    alert('testing js');        
  });
    </script>
4

4 回答 4

5

Everything you need to know about this problem can be found here: Why I have to put all the script to index.html in jquery mobile

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).

于 2013-07-24T07:00:45.083 回答
2

根据您发布的代码：

确保您包括：

 <script src="js/jquery.mobile-1.3.1.min.js"></script>

前：

    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>

我确信 mobileinit 是 jquery-mobile 框架的一部分。

其次，我强烈建议按照 jquery-mobile 文档使用定向页面结构。

在一个文档中使用多个 div（页面）的另一个好处是用户不必在每个页面请求上重新加载所有 javascript/css，从而最大限度地减少使用的带宽量以及页面的性能。

于 2013-07-24T05:05:08.843 回答
1

确保您包含所需的 jquery 库，并且您还可以尝试其他 jquery 移动事件..

页面转换用于动画从当前活动页面 (fromPage) 到新页面 (toPage) 的变化。在这些转换之前和之后触发事件，以便在显示或隐藏页面时通知观察者。触发的事件如下：

显示前的页面

于 2013-07-24T05:49:24.007 回答
0

您应该使用 script 标签在每个 html 文件中包含 jquery 文件，如下所示

<script type="text/javascript" language="javascript" src="jquery-1.6.3.min.js"></script>
于 2013-07-24T04:16:56.310 回答