如何在JQM應用程序的所有頁面上註冊刷卡事件？

Question

我的應用程序有兩個面板作爲主佈局，所以所有的子頁面都有這兩個面板。現在，我想爲應用程序中的所有頁面註冊滑動事件，以便用戶可以從任何地方訪問這兩個面板。 我創造了這個功能，在這裏，這樣我就可以把這種來自不同的地方進行註冊：

function registerSwipeEvents() { 
    //panel swipe from left and right for categories, favs. 
    $(document).on("swipeleft swiperight", '[data-role=page]', function (e) { 
     // We check if there is no open panel on the page because otherwise 
     // a swipe to close the left panel would also open the right panel. 
     // We do this by checking the data that the framework stores on the page element (panel: open). 
     if ($.mobile.activePage.jqmData("panel") !== "open") { 
      if (e.type === "swipeleft") { 
       $(".right-panel").panel("open"); 
      } else if (e.type === "swiperight") { 
       $(".left-panel").panel("open"); 
      } 
     } 
    }); 
} 

我已經打過電話，從pageinit此功能（運行腳本只有一次），pagebeforeshow和pageshow（始終運行），如這個：

$('#HomePage').on('pageshow', function() { 
    getFavouritesFromClient(); 

}); 

但是這個事件不適用於所有頁面，當我第二次從一個頁面轉到另一個頁面時！也許我沒有正確地使用這些事件，但是迄今爲止第一輪導航工作的最好的一個是pageshow。

Answer 1

此代碼幫助註冊所有頁面上的滑動事件。

pagecreate事件應用於所有頁面（使用[data-role=page]）。在這個活動中，我們找到該特定頁面的ID號$(this).attr('id')。然後，我們註冊了swipeleft和swiperight事件對特定頁面單獨使用"#"+thisPageId

（我已經包含在幾行代碼，幫助我弄清楚 - 對於那些誰知道有興趣的是）

//var glbl; // this helped me find the attribute - global variable for accessing via the console 
$(document).on("pagecreate", "[data-role=page]", function() { 
    //console.log($(this)); // uncomment this line to see this DIV 
    //glbl = $(debug); //uncomment this line to assign this DIV to global variable "glbl", which you can then access via the console 
    var thisPageId = $(this).attr('id'); 
    $(document).on("swipeleft swiperight", "#"+thisPageId, function(e) { 
     // We check if there is no open panel on the page because otherwise 
     // a swipe to close the left panel would also open the right panel (and v.v.). 
     // We do this by checking the data that the framework stores on the page element (panel: open). 
     if ($(".ui-page-active").jqmData("panel") !== "open") { 
      if (e.type === "swipeleft") { 
       $("#panelRight").panel("open"); 
      } else if (e.type === "swiperight") { 
       $("#panelLeft").panel("open"); 
      } 
     } 
     console.log('on swipes'); 
    }); 
    console.log('on pagecreate'); 
});