trapping back button breaks button on other pages

trapping back button breaks button on other pages

Hi All!
 
I want to trap the back button on my index.html page so that users will know when they're exiting the app vs sending the app to the background.
 
I have code that works by trapping the back button, checks the page and if it's the index page, prompts to exit and cancels the exit if necessary.  The problem is, when I navigate to another page the back button no longer works at all.
 
At this point in the development, this is a multiple page model so each page is in its own seperate file and to me, document.addEventListner should terminate when a new page (document is loaded).
 
Here's the code:
  2. document.addEventListener(" backbutton", function(e) {
  3. if($('. ui-page-active'). attr('id') == "main");
  4. {
  5.   if(confirm("Really exit blah blah?\n\nIf you do, you will no longer receive messages!") )
  6.   {
  7.     device.exitApp();
  8.   }
  9.   else
  10.   {
  11.     navigator.app.backHistory();
  12.   }
  13. }
  14. navigator.app.backHistory();
  15. }, false);