Event not available anymore after page change in jQuery Mobile

Question

I use jQuery Mobile 1.4.5. When I load a page and right away click the mobile menu toggle button, the mobile menu opens. When I change pages, the mobile menu does not open anymore when I click the toggle button.

My navigation looks like this:

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

How do I need to adapt my code?

Answer 1

Use just one external toolbar and place the markup outside the page within the body of your page. It's easy: the markup remains the same. Don't forget to initialize the toolbar: because external toolbars are not within a page, you must call the toolbar plugin yourself.

In $(document).ready add this:

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

Here is the jQuery Mobile documentation about this topic:

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

and here for fixed toolbars:

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