popup on page2 navigates back to page1 after close

popup on page2 navigates back to page1 after close

This issue occurs on all browsers (including mobile ... tested on my Gingerbread 2.3.7 and ICS), except IE.  I click a button to change from page 1 to page 2 and then click another button that shows a popup, but when that message is closed it goes back to page 1.  I click the button on page 1 again so it goes to page 2, but then the popup button doesnt work.

page1.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <title>aWe</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1" />

  8.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
  9.   <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
  10.   <script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js" type="text/javascript"></script>
  11.   <script type="text/javascript">
  12.       function showMessage(HTMLMessage) {
  13.         var aPage = $.mobile.activePage.attr('id');
  14.         $('#' + aPage + ' .popupMsg h1').html('Message');
  15.         $('#' + aPage + ' .popupMsg p').html(HTMLMessage);
  16.         $('#' + aPage + ' .popupMsg').popup('open', { transition: 'slideup', reload: false });
  17.       }
  18.   </script>
  19. </head>
  20. <body class="ui-mobile-viewport">
  21.   <div data-role="page" id="page1">
  22.     <div data-role="header" data-theme="c" data-position="fixed">
  23.       <h1>Page 1</h1>
  24.     </div>
  25.     <div data-role="content">
  26.         <input type="submit" id="btnChangePage" data-theme="b" data-icon="home" data-iconpos="right" value="Change Page" data-mini="false" />
  27.     </div>
  28.     <div class="popupMsg" data-role="popup" data-overlay-theme="a">
  29.    <div data-role="header" data-theme="d" class="ui-corner-top" role="banner">
  30.    <h1 role="heading"></h1>
  31.    </div>
  32.    <div data-role="content" data-theme="c" class="ui-corner-bottom ui-content" role="main">
  33.    <p></p> 
  34.    </div>
  35.     </div>
  36.     <script type="text/javascript">
  37.         $('#page1').on('pageinit', function (event) {
  38.             $('#btnChangePage').click(function () {
  39.                 $.mobile.changePage('page2.html',
  40.                   { reloadPage: true, transition: 'slidedown', reverse: false, changeHash: false }
  41.                 );
  42.             });
  43.         });
  44.     </script>
  45.   </div>
  46. </body>
  47. </html>
page2.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <title>aWe</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1" />

  8.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
  9.   <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
  10.   <script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js" type="text/javascript"></script>
  11. </head>
  12. <body class="ui-mobile-viewport">
  13.   <div data-role="page" id="page2">
  14.     <div data-role="header" data-theme="c" data-position="fixed">
  15.       <h1>Page 2</h1>
  16.     </div>
  17.     <div data-role="content">
  18.         <input type="submit" id="btnShowMessage" data-theme="b" data-icon="home" data-iconpos="right" value="Show Message" data-mini="false" />
  19.     </div>
  20.     <div class="popupMsg" data-role="popup" data-overlay-theme="a">
  21.    <div data-role="header" data-theme="d" class="ui-corner-top" role="banner">
  22.    <h1 role="heading"></h1>
  23.    </div>
  24.    <div data-role="content" data-theme="c" class="ui-corner-bottom ui-content" role="main">
  25.    <p></p> 
  26.    </div>
  27.     </div>
  28.     <script type="text/javascript">
  29.         $('#page2').on('pageinit', function (event) {
  30.             $('#btnShowMessage').click(function () {
  31.                 showMessage('After this popup is closed you will be forced back to page1.html');
  32.             });
  33.         });
  34.     </script>
  35.   </div>
  36. </body>
  37. </html>

I am new to jQuery mobile, so if I am missing something simple here let me know.  Also feel free to criticize how I have my code written.

Hope someone can provide some assistance.