javascript - jQuery Mobile 中的页面更改后，事件不再可用

Question

我使用 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();
   });
});

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

Answer 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/