PageInit don't work

PageInit don't work

I have two html.

Index.html
  1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
        <script src="jquery.mobile/jquery-1.7.2.min"></script>
        <script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
        <script src="cordova-1.9.0.js"></script>
        <script>       
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
           
            <div data-role="header" data-theme="b">
                <a href="index.html" data-icon="home">Home</a>
                <h1>SBCP 2012</h1>
            </div>       
                                          
              <div data-role="footer" data-position="fixed" data-theme="b">
                  <!--<h1>Footer</h1>-->
                  <div data-role="navbar" data-iconpos="top">
                <ul id="menu">
                    <li><a href="#" data-icon="home">SBPC 2012</a></li>
                    <li><a href="teste2.html">Como Chegar?</a></li>
                    <li><a href="#">Programação</a></li>
                    <li><a href="#">Cursos Paralelos</a></li>
                </ul>
                </div><!-- /navbar -->
              </div>
                 
        </div>  
    </body>
    </html>

































teste2.html

  1.     <!DOCTYPE html>
        <html>
          <head>
            <title>Page Events</title>
           
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
        <script src="jquery.mobile/jquery-1.7.2.min"></script>
        <script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
      
            <script>

              $('#mypage').live('pageinit', function(event) {
           alert('pageinit triggered.');
          
              });
        </script>
          </head>
          <body>
            <div id="mypage" data-role="page">
                <div data-role="header">
                    <h1>
                        Page Events
                    </h1>
                </div>
                <div data-role="content">
        
                </div>
            </div>   
          </body>
         
        </html>
































See that in the teste2.html, have a event PageInit.
When I execute teste2.html alone, the PageInit event works, but when a execute index.html and after I click in the button "Como Chegar", the page teste2.html open, but evet PageInit don't work.
Sorry by my english more or less.