jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

I have created a simple index.html file in which there is only one button. On clicking the button  $( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html"); is called to navigate to page2. 
After moving to page2, a navbar is present within it but the navbar items are not clickable.
Below are the codes:

index.html
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
  7.         <title>Blank App Designer Cordova Web App Project Template</title>
  8.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  9.         <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
  10.         <style>
  11.                 @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
  12.                 @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
  13.         </style>
  14.         <link rel="stylesheet" href="css/app.css">
  15.         <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
  16.         <script src="cordova.js" id="xdkJScordova_"></script>
  17.         <script src="js/app.js"></script>
  18.         <script src="js/init-app.js"></script>
  19.         <script src="xdk/init-dev.js"></script>      
  20.         <script type="application/javascript" src="lib/jquery.min.js"></script>
  21.         <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
  22.     </head>

  24.     <body onload="init()">
  25.         <div class="upage vertical-col left" id="mainpage" data-role="page" data-theme="b"><a class="widget uib_w_1 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="clickButton">Click</a>
  26.         </div>
  27.     </body>

  29. </html>
page2.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Mister Math - Ask me math!</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
  8.     <link rel="stylesheet" href="css/app.css">
  9.     <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
  10.     <script src="cordova.js" id="xdkJScordova_"></script>
  11.     <script src="js/app.js"></script>  
  12.     <script src="js/init-app.js"></script>      
  13.     <script src="xdk/init-dev.js"></script>    
  14.     <script type="application/javascript" src="lib/jquery.min.js"></script>
  15.     <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
  16. </head>

  18. <body onload="init()">
  19. <div data-role="page" id="pageone" data-theme="b">
  20.   <div data-role="header">
  21.     <h1>Header</h1>
  22.     <div data-role="navbar">
  23.       <ul>
  24.         <li><a href="#" class="ui-btn-active" data-icon="home">Home</a>
  25.         </li>
  26.         <li><a href="#pagetwo" data-icon="arrow-r">Page Two</a>
  27.         </li>
  28.       </ul>
  29.     </div>
  30.   </div>

  32.   <div data-role="main" class="ui-content">
  33.     <p>This is page 1</p>
  34.   </div>

  36.   <div data-role="footer">
  37.     <h1>Footer</h1>
  38.   </div>
  39. </div>

  41. <div data-role="page" id="pagetwo" data-theme="b">
  42.   <div data-role="header">
  43.     <h1>Header</h1>
  44.     <div data-role="navbar">
  45.       <ul>
  46.         <li><a href="#pageone" data-icon="home">Home</a>
  47.         </li>
  48.         <li><a href="#" data-icon="arrow-r">Page Two</a>
  49.         </li>
  50.       </ul>
  51.     </div>
  52.   </div>

  54.   <div data-role="main" class="ui-content">
  55.     <p>This is page 2</p>
  56.   </div>

  58.   <div data-role="footer">
  59.     <h1>Footer</h1>
  60.   </div>
  61. </div>
  62. </body>
  63. </html>
app.js
  1. function init() { 
  2.     document.addEventListener("deviceready", deviceReady, true);
  3. }

  5. function deviceReady(){
  6. $(document).on('click','#clickButton', function(e) {
  7. $( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html");
  8. });
  9. }

The navbar links are clickable if I directly view page2.html in any web browser but it is not clickable when it is loaded inside the app using 
$( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html");

Can anyone help me out fixing this?
Thanks in advance