如何在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'); 
});