jQuery Mobile 中的页面更改后事件不再可用答案

【问题标题】：Event not available anymore after page change in jQuery MobilejQuery Mobile 中的页面更改后事件不再可用
【发布时间】：2016-12-12 08:19:15
【问题描述】：

我使用 jQuery Mobile 1.4.5。当我加载页面并立即单击移动菜单切换按钮时，移动菜单会打开。当我更改页面时，当我单击切换按钮时，移动菜单不再打开。

我的导航是这样的：

<div data-role="header">
   <div data-role="navbar">
      <ul>
         <li><a href="{{ url('_my_page_1') }}">Page 1</a></li>
         <li><a href="{{ url('_my_page_2') }}">Page 2</a></li>
         <li><a href="{{ url('_my_page_3') }}">Page 3</a></li>
      </ul>

      <a id="toggle-mobile-menu" href="javascript:void(0)" data-role="none">
         Toggle mobile menu
      </a>

      <ul id="mobile-menu">
         // ...
      </ul>
   </div>
</div>
<div data-role="content"></div>

$(function () {
   $(document).on('click','#toggle-mobile-menu', function() {
            $('#mobile-menu').fadeToggle();
   });
});

我需要如何调整我的代码？

【问题讨论】：

您的代码看起来不错。您确定此代码对所有页面都可见吗？您是否尝试在此代码上设置断点并检查单击按钮时是否正在调用它？
@Medard 是的，我确定。即使我将脚本代码放在我的标题 div 中，移动菜单也只会在我的浏览器中初始页面加载后打开，但在通过导航更改页面后不会打开（请注意：内容通过 ajax 加载，因为它是 jQuery Mobile）。
$(document).on("pagecreate", function () { $("menu").off("click").on("click", function() { do something } });
@Omar 不幸的是，此代码不起作用。我在内部函数中插入了一个'alert('pagechange')'，我注意到在页面更改时它会被触发两次......
那么您在所有具有相同 id 的页面中都有相同的按钮？

标签： javascript jquery jquery-mobile

【解决方案1】：

仅使用一个外部工具栏并将标记放置在页面外部的页面主体内。这很容易：标记保持不变。不要忘记初始化工具栏：因为外部工具栏不在页面内，所以必须自己调用工具栏插件。

在$(document).ready 中添加：

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

这里是关于这个主题的 jQuery Mobile 文档：

http://demos.jquerymobile.com/1.4.5/toolbar-external/

这里是固定工具栏：

http://demos.jquerymobile.com/1.4.5/toolbar-fixed-external/

【讨论】：