cordova - Phonegap + jquery mobile + backbutton + pageinit

Question

我正在使用 jquery mobile (1.3.1) 开发一个 Phonegap (cordova 2.5.0) 应用程序。我关于按下后退按钮后 pageinit 函数行为的问题。第一次导航到（例如）静态页面时，pageinit 正常触发。之后，当按下后退按钮并再次从菜单页面导航到相同的静态页面时，pageinit 不再触发。这种行为的可能原因是什么？

• 贾尼

  //PAGEINIT
  $("#staticsPage").live("pageinit", function(){
      alert(staticsPage Init);
      init_statistics();
  });
  
  
  
   document.addEventListener("deviceready", appReady, false);
  
  //HANDLE BACK BUTTON
  function appReady(){   
      document.addEventListener("backbutton", function(e){
          if($.mobile.activePage.is('#menuPage'))
          {
              e.preventDefault();
              navigator.app.exitApp();
          }
  
          else if($.mobile.activePage.is('#staticsPage'))
          {
          e.preventDefault();
          $.mobile.changePage($("#menuPage"));
          }
          else 
          {
               navigator.app.backHistory();
          }
      }, false);  
  
    } 
  

Answer 1

该pageinit事件仅在页面加载到 DOM 后才会触发，因此只会触发一次。

在正在初始化的页面上触发，在初始化发生后

我会使用这个pageshow事件。当您导航到页面时会触发此事件：

过渡动画完成后在“toPage”上触发。

因此，请尝试使用此代码：

$('#staticsPage').on('pageshow', function(){
    alert(staticsPage Init);
    init_statistics();
});

document.addEventListener("deviceready", appReady, false);

//HANDLE BACK BUTTON
function appReady()
{   
    document.addEventListener('backbutton', function(e){
        var activePage = $.mobile.activePage.attr('id');

        if(activePage == 'menuPage')
        {
            e.preventDefault();
            navigator.app.exitApp();
        }
        else if(activePage == 'staticsPage')
        {
            e.preventDefault();
            $.mobile.changePage('#menuPage');
        }
        else 
        {
             navigator.app.backHistory();
        }
    }, false);
}

在这里查看jQuery Mobile 事件列表。