jQuerry Mobile Panel Error

jQuerry Mobile Panel Error

I am implementing jquery mobile panel into my site. All works fine until I decide to visit the same page twice, then the panel icon (data-icon="bars") does not open the panel. It does not respond. It works when I manually reload the page. I believe it has sth to do with the cache or ajax :-( Please help. Recap: 1. I tap the panel icon & it opens side panel. I go from page_a to page_b. Next, I go back to page_a and try to go back to page_b again (data-icon="bars") does not respond any more. I need to manually reload the page and then it works. How to fix it please? Thank you


  2. <html>
  3. <head>
  4. <title>jQuery Mobile page</title>
  5.   <meta charset="utf-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="themes/my-custom-theme.css" />
  8.   <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
  9.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" /> 
  10.   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
  11.   <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
  12. </head>
  13. <body>
  14. <!-- Start of page_a page -->
  15.     <div data-role="page" id="page_a">
  16.         <div data-role="header" data-position="inline">
  17.         <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
  18.         </div><!-- /header -->
  19. <div data-role="content"><p>This is page_a.</p>
  20.         </div><!-- /content -->
  21.         <div data-role="panel" data-display="push" id="nav-panel">
  22.         <ul data-role="listview">
  23.             <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
  24.                 <li><a href="#page_a">A</a></li>
  25.                 <li><a href="#page_b">B</a></li>
  26.                 <li><a href="#page_c">C</a></li>
  27.         </ul>
  28.     </div><!-- /panel -->
  29.     </div><!-- /page_a end -->

  31.     <!-- Start of page_b page -->
  32.     <div data-role="page" id="page_b">
  33.         <div data-role="header" data-position="inline">
  34.         <a href="#nav-panel" data-icon="bars" data-iconpos="notext"></a>
  35.         </div><!-- /header -->
  36.        <div data-role="content"><p>This is page_b.</p>
  37.         </div><!-- /content -->
  38.         <div data-role="panel" data-display="push" id="nav-panel">
  39.         <ul data-role="listview">
  40.             <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
  41.                 <li><a href="#page_a">A</a></li>
  42.                 <li><a href="#page_b">B</a></li>
  43.                 <li><a href="#page_c">C</a></li>
  44.         </ul>
  45.     </div><!-- /panel -->
  46.     </div><!-- /page_b end -->
  48.    <!-- Start of page_c page -->
  49.     <div data-role="page" id="page_c">
  50.         <div data-role="header" data-position="inline">
  51.         <a href="#nav-panel" data-icon="bars" data-iconpos="notext"></a>
  52.         </div><!-- /header -->
  53.         <div data-role="content"><p>This is page_c.</p>
  54.         </div><!-- /content -->
  55.         <div data-role="panel" data-display="push" id="nav-panel">
  56.         <ul data-role="listview">
  57.             <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
  58.                 <li><a href="#page_a">A</a></li>
  59.                 <li><a href="#page_b">B</a></li>
  60.                 <li><a href="#page_c">C</a></li>
  61.         </ul>
  62.     </div><!-- /panel -->
  63.     </div><!-- /page_c end -->
  64. </body>
  65. </html>