Jquery Mobile Panel Stops functioning after first use.

Jquery Mobile Panel Stops functioning after first use.

I have a simple Phonegap + Jquery Mobile app ive started developing.

Splash screen loads, app starts

In the header is a button to open a side panel for my menu. Click it once and the menu opens, click away and the menu closes. but from then on you cannot open the panel again the functionality simply doesn't work :(

Here is the entirety of my code to see if someone can see the issue? It should be simple enough and i dont see any problem with the code that could cause the problem.
  3. <!DOCTYPE HTML>
  4. <html>
  5.  <head>
  6.   <title>Craven Weather</title>
  7.   
  8.   <meta name="viewport" content="width=device-width, initial-scale=1"> 
  9.   <script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
  10. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  11. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  12. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  13.   <link rel="stylesheet" type="text/css" href="css/myCss.css" />
  14.      
  15.     <script type="text/javascript" charset="utf-8">
  16. document.addEventListener("deviceready", onDeviceReady, false);

  18.       function onDeviceReady() {
  19.            document.addEventListener("backbutton", onBackKeyDown, false);
  20.            document.addEventListener("menubutton", onMenuKeyDown, false);
  21.          }
  22.      
  23.    
  24.      
  25.      // Handle the back button
  26.    function onBackKeyDown() {
  27.      }
  28.     
  29.  // Handle the menu button
  30.  function onMenuKeyDown() {
  31. $( "#menu_panel" ).panel( "open" );
  32.  }  
  33.     </script>
  34.  </head>
  35.  
  36.  
  37.  <body>
  38.    <div data-role="page" data-theme="d" id="home-page" data-url="home-page">
  39.  
  40. <div data-role="header" data-theme="c">
  41.     <h1>Craven Weather</h1>
  42.     <a href="#menu_panel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true">Bars</a>
  43. </div>
  45. <div data-role="content">
  46.       <p>Our page content goes here</p>
  47.     </div>
  48.    
  49.    
  50. <div data-role="panel" id="menu_panel"  data-position-fixed="true" data-display="push" data-theme="a">    
  51.     <ul data-role="listview" data-theme="c">
  52.     <li data-icon="delete" data-theme="a"><a href="#" data-rel="close">Main Menu</a></li>
  53.     <li><a href="#">Forecast</a></li>
  54.     <li><a href="#">Craven Map</a></li>
  55.     <li><a href="#">UK Map</a></li>
  56.     <li><a href="#">Euro Map</a></li>
  57.     <li><a href="#">World Map</a></li>
  58.    
  59. </ul>
  60. </div>

  62. </div>
  64.  </body>
  65. </html>