Jquery mobile jquery移动转换事件问题

我正在创建一个jquery移动站点。我使用的是jQ mobile的最新版本。 我在顶栏上有一个按钮，可以打开菜单。该按钮仅在主页上可用。在其他页面上，一个后退按钮取代了它的位置。菜单div位于页面div下（想想Facebook的iphone应用程序）

当我转换到没有很多内容的页面时，菜单显示在新页面的div下。我浏览了jQ移动文档，发现了几个似乎符合要求的事件。我在主页上添加了以下JavaScript：

 <script type="text/javascript">
  $(document).on("pagebeforeshow", function(){
    $('#menu').show();
  });
  $(document).on("pagebeforehide", function() {
    $('#menu').hide();
  });
</script>

我希望上面的代码在每次显示页面时绑定事件执行一次。我得到的是两次“隐藏”警报，然后是在我转换到显示页面之前的“显示”警报。我觉得我在jQuery移动生命周期中遗漏了一些东西。

解决方案 我给你举了一个有效的例子：

与您的示例不同，我制作了一个简单的div，它在页面转换期间每次都显示。您可以通过删除javascript代码来测试它

这是隐藏/显示自定义div的js代码：

$(document).on('pagebeforehide','[data-role="page"]',function(e,data){    
    $('#test-div').hide();  
});

$(document).on('pageshow','[data-role="page"]',function(e,data){    
    $('#test-div').show();  
});

在之前还有3个事件。我们不能使用它们，因为它们在页面加载到DOM之前只会触发一次。每次触发的第一个事件是，每次触发的最后一个事件是

还有一件事与此问题无关，此语法将不起作用：

$(document).on("pageinit", function(){
  $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
      alert("show");
      $('#menu').show();
  });
  $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
      alert("hide");
      $('#menu').hide();
  });
});

页面事件不能像那样序列化。页面事件不能是其他页面事件的子事件

更多信息 如果您想了解更多关于这一点以及页面事件如何工作的信息，请在我的个人博客中选择一个解决方案 我给你举了一个有效的例子：

与您的示例不同，我制作了一个简单的div，它在页面转换期间每次都显示。您可以通过删除javascript代码来测试它

这是隐藏/显示自定义div的js代码：

$(document).on('pagebeforehide','[data-role="page"]',function(e,data){    
    $('#test-div').hide();  
});

$(document).on('pageshow','[data-role="page"]',function(e,data){    
    $('#test-div').show();  
});

在之前还有3个事件。我们不能使用它们，因为它们在页面加载到DOM之前只会触发一次。每次触发的第一个事件是，每次触发的最后一个事件是

还有一件事与此问题无关，此语法将不起作用：

$(document).on("pageinit", function(){
  $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
      alert("show");
      $('#menu').show();
  });
  $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
      alert("hide");
      $('#menu').hide();
  });
});

页面事件不能像那样序列化。页面事件不能是其他页面事件的子事件

更多信息

---

如果您想了解更多关于这方面的信息以及页面事件是如何工作的，请在我的个人博客中查看，

我最终使用了类似的方法，但页面事件中确实有一个页面事件。我不明白你为什么认为这不起作用。我最终使用了类似的东西，但我确实在页面事件中有一个页面事件。我不明白你为什么认为这不管用。