jquery mobile pageinit not firing after changepage event

jquery mobile pageinit not firing after changepage event

I'm trying to navigate to a different .html page using

I have got two HTML Pages namely one.html and second.htmml 

On click of  button button under one.html , i am calling second.html as shown below

    function callPage () {
        $(':mobile-pagecontainer').pagecontainer('change', 'second.html', {
            transition: 'slide',
            changeHash: false,
            reverse: true,
            showLoadMsg: true
        });
      }

second.html 

        $( document ).on( "pageinit", "#homedeliverypage", function( event )
        {
        alert('Alert not getting called');
        });
          </script>
          </head>
          <body >
            <div data-role="page" id="homedeliverypage">
            </div>div>
          </body>
        </html> 


The Pageinit event is never getting called 

However, if I do window.location.href = "second.html" then everything fires accordingly.

What am I missing?

Thanks