2

我是 jquery mobile 和 Phonegap 的新手。如果我在任何地方错了，请纠正我。

我启动了一个应用程序，它有五个 html 页面 -home.html、menu.html、orders.html、reservation.html、about.html。

我编写了一个通用的 JavaScript 文件 script.js，由所有这些包含通用 JavaScript 函数的 html 文件共享。在 homeactivity 中，我添加了 menu.html，因为我默认需要该页面。

现在我需要运行 init() 函数，该函数在每五个页面中有不同的代码，应该在页面显示给用户之后运行。

从 jquery mobile 和 Phonegap 的文档中，我得到了这些与页面加载相关的事件：

mobileinit, pagebeforecreate, pagecreate, pageinit, pagebeforeshow, pageShow, onDeviceReady

所以据我所知，我在加载 jquerymobile.js 之前在所有五个 html 文件和公共 JavaScript 文件中添加了这段代码。所以我的每个 html 文件头看起来像这样：

     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
     <script type="text/javascript">
         document.addEventListener("deviceready", onDeviceReady, false);

     //reservation.html is replace by relative file name in each diff file
     function onDeviceReady() {
         // Empty
        console.log('ondeviceReady function on reservation.html');
     }

     $(document).bind("mobileinit", function(){
         //apply overrides here
         $.mobile.defaultPageTransition = 'none';
     });

     $(document).bind('pagebeforecreate',function(){
         console.log('reservation.html pagebeforecreate triggered');
     });


     $(document).bind('pagecreate',function(){
         console.log('reservation.html pagecreate triggered');
     });

     $(document).bind('pageinit',function(){
         console.log('reservation.html pageinit triggered');
     });

     $(document).bind('pagebeforeshow',function(){
         console.log('reservation.html pagebeforeshow triggered');
     });

     $(document).bind('pagebeforehide',function(){
         console.log('reservation.html pagebeforehide triggered');
     });

     $(document).bind('pageshow',function(){
         console.log('reservation.html pageshow triggered');
     });

     $(document).bind('pagehide',function(){
         console.log('reservation.html pagehide triggered');
     });

     $(document).bind('pagebeforeload',function(){
         console.log('reservation.html pagebeforeload triggered');
     });

     $(document).bind('pageload',function(){
         console.log('reservation.html pageload triggered');
     });
   </script>
   <script type="text/javascript" charset="utf-8" src="js/script.js"></script>
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

当我启动应用程序时，console.log 的顺序如下：

   menu.html - pagebeforecreate
   script.js - pagebeforecreate
   menu.html - pagecreate
   script.js - pagecreate
   menu.html - pageinit
   script.js - pageinit
   menu.html - pagebeforeshow
   script.js - pagebeforeshow
   menu.html - pageShow
   script.js - pageShow
   menu.html - onDeviceReady
   script.js - onDeviceReady

这正如我所料。但是，当我导航到 home.html（每个文件中链接的所有五个文件）时，出现了问题，console.log 如下：

   menu.html - pagebeforeload
   script.js - pagebeforeload
   menu.html - pagebeforecreate
   script.js - pagebeforecreate
   menu.html - pagecreate
   script.js - pagecreate
   menu.html - pageinit
   script.js - pageinit
   menu.html - pageload
   script.js - pageload
   menu.html - pagebeforehide
   script.js - pagebeforehide
   menu.html - pagebeforeshow
   script.js - pagebeforeshow
   menu.html - pagehide
   script.js - pagehide
   menu.html - pageShow
   script.js - pageShow
   menu.html - onDeviceReady
   script.js - onDeviceReady

甚至我从每个页面中删除了页面事件，并在外部 javascript 文件中添加了pageShow事件并调用init()函数，并且我在每个 html 文件中定义了页面特定的 init()函数，然后在每个页面的标题中添加了外部 Javascript 文件。仍然每次我导航到不同的页面时，只有 menu.html 中的 init() 函数 被执行，它被添加到 homeactivity 中。

所以这里没有触发 home.html 中的任何事件。我有页面特定的 javascript 应该只在页面显示后运行。请在我做错的地方帮助我。

4

0 回答 0