title: How to detect back and menu button on Android? PhoneGap + jQuery Mobile
body: <p>I'm on jQuery Mobile v1.2.0 and PhoneGap v2.2.0. None of the PhoneGap events seem to be firing however I call it (be it via <code>document.addEventListener</code> or <code>$(document).on</code>. The back button and menu button detection just doesn't work.</p>
  
  <p>There are other questions like this but so far all I can see are suggestions to either use <code>document.addEventListener</code> or use the jQuery approach for adding event listeners but it really doesn't work. Can anybody give me a sure-fire way to detect them?</p>
  
  <p>Here's the <code>&lt;head&gt;</code> of my index.html</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  
      &lt;link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.css" /&gt;
      &lt;link rel="stylesheet" href="jqm/jquery.mobile.theme-1.2.0.css" /&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="jqm/jquery.mobile-1.2.0.js"&gt;&lt;/script&gt;
      &lt;script src="js/cordova.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).live("pagechange",function(){
              var page = $.mobile.activePage.attr("id");
  
              document.addEventListener("menubutton", menuKeyDown, true);
              function menuKeyDown() {
                  alert('Menu button pressed.');
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>