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

  22.     <body onload="init()">
  23.         <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>
  24.         </div>
  25.     </body>

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

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

  29.   <div data-role="main" class="ui-content">
  30.     <p>This is page 1</p>
  31.   </div>

  32.   <div data-role="footer">
  33.     <h1>Footer</h1>
  34.   </div>
  35. </div>

  36. <div data-role="page" id="pagetwo" data-theme="b">
  37.   <div data-role="header">
  38.     <h1>Header</h1>
  39.     <div data-role="navbar">
  40.       <ul>
  41.         <li><a href="#pageone" data-icon="home">Home</a>
  42.         </li>
  43.         <li><a href="#" data-icon="arrow-r">Page Two</a>
  44.         </li>
  45.       </ul>
  46.     </div>
  47.   </div>

  48.   <div data-role="main" class="ui-content">
  49.     <p>This is page 2</p>
  50.   </div>

  51.   <div data-role="footer">
  52.     <h1>Footer</h1>
  53.   </div>
  54. </div>
  55. </body>
  56. </html>
app.js
  1. function init() { 
  2.     document.addEventListener("deviceready", deviceReady, true);
  3. }

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

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