title: Cordova 5.0 Back Button Exits jQuery Mobile App
body: <p>I'm building a Cordova 5.0.0 application with Visual Studio 2015 RC and jQuery Mobile (<a href="http://demos.jquerymobile.com/1.4.5/pages-multi-page/" rel="nofollow noreferrer">multipage app</a>) (jQuery 2.1.4, jQuery Mobile 1.4.5), and I'm experiencing behavior with the back-button contrary to my understanding of how it should work.  Right now, all my testing and development is being done on/for Windows Phone 8.1.  The only plugins I'm using are <a href="https://github.com/apache/cordova-plugin-media" rel="nofollow noreferrer">cordova-plugin-media</a>, which has a dependency on <a href="https://github.com/apache/cordova-plugin-file" rel="nofollow noreferrer">cordova-plugin-file</a>, though I'm not explicitly using the file plugin.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>No matter what page I'm on, if I press the hardware back button, the app just goes to background (doesn't close, just the app is navigated away from).  From everything that I've read, I understand that the back button is supposed to work like page navigation by default.  (That is, if you go from page1 to page2 and press back, then you go to page1).</p>
  
  <p>So, I've tried overriding the back-button with my own implementation, but I can't get the <a href="http://cordova.apache.org/docs/en/5.0.0/cordova_events_events.md.html#backbutton" rel="nofollow noreferrer">backbutton event</a> to fire.</p>
  
  <p>Here is some code:</p>
  
  <pre><code>(function () {
      "use strict";
  
      document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
  
      function onDeviceReady() {
          console.log("deviceReady");
          // Handle the Cordova pause and resume events
          document.addEventListener( 'pause', onPause.bind( this ), false );
          document.addEventListener( 'resume', onResume.bind( this ), false );
  
          // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
          console.log('assign back button');
          document.addEventListener('backbutton', function (e) {
              console.log("backbutton");
              window.history.back();
              return false;
          }, false);
      };
  </code></pre>
  
  <p>When I run my app, <code>deviceReady</code> makes it to the console, and so does <code>assign back button</code>.  When I navigate into my app (doesn't matter if it's 1, 2, 3, or 4 pages) and click the back button, <code>backbutton</code> doesn't make it to the console, and the app just moves to the back.</p>
  
  <p>If I change the event listener to this:</p>
  
  <pre><code>document.addEventListener('backbutton', onBackButton, false);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>function onBackButton() {
      console.log("backButton");
      window.history.back();
      return false;
  };
  </code></pre>
  
  <p>then I get the same result.</p>
  
  <p>My script tags are at the bottom of my body tag inside index.html and are in this order:</p>
  
  <pre><code>&lt;!-- Cordova reference, this is added to your app when it's built. --&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/platformOverrides.js"&gt;&lt;/script&gt; // Empty file
  
  &lt;script src="scripts/index.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jqueryHelpers.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Is there something blaringly obvious that I'm doing wrong here?</p>
  
  <p><code>platformOverrides.js</code> is provided by the Visual Studio template and is empty.  <code>index.js</code> is provided by the template, and is where the code posted above lives.  <code>jqueryHelpers.js</code> is just two constants, like this:</p>
  
  <pre><code>var APIROOT = "http://WEBAPI-ADDRESS.COM/";
  var PCFGUID = "00000000-0000-0000-000E-000000000000"; // changed to Guid.Empty here for security reasons.
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've noticed that Visual Studio is pulling down the incorrect version of Cordova also.  I'm not sure how to correct this, and I'm not sure if this is my problem or not.  I've opened a <a href="https://stackoverflow.com/q/31396117/403404">new question for it</a>, but wanted to mention it here in case it was relevant.  I'm specifying 5.0.0, but when I look at the dynamic content while debugging, it looks like it's using 3.9.0-dev</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Upon further research, it looks like the version number might be correct.  See: <a href="https://stackoverflow.com/a/31430780/403404">https://stackoverflow.com/a/31430780/403404</a></p>