Question

我有one.html，点击链接Log In转到two.html（打开一个完整的新页面）。在two.html里面我有这个代码

one.html

<script id="panel-init">
    $(function() {
        $( "body > [data-role='panel']" ).panel();
        $( "body > [data-role='panel'] [data-role='listview']" ).listview();

        $( "[data-role='navbar']" ).navbar();
        $( "[data-role='header']" ).toolbar();
    });
</script>

<body>
    <div id="defaultHomePage" data-role="page">
      <div data-role="header" data-position="fixed" data-theme="a">
        <h3>Home</h3>
        <a class="ui-btn ui-btn-left ui-shadow ui-corner-all ui-btn-icon-left ui-icon-location ui-shadow-icon" href="#changeLocationForm">location</a>
        <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars ui-shadow-icon ui-shadow ui-corner-all" href="#rightMenu"></a>
      </div>
      <div role="main" class="ui-content fxd-ui-content">

      </div>
      <div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="rightMenu" data-position="right">
        <ul data-role="listview">
        <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
        <li><a href="${pageContext.servletContext.contextPath}/login">Log In</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Help</a></li>
        </ul>
      </div>     
      <div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="changeLocationForm" data-position="left">

      </div>        
    </div>
</body>

two.html

<script>
    $(function() {alert("mm");
        $( "body > [data-role='panel']" ).enhanceWithin().panel();
        $( "body > [data-role='panel'] [data-role='listview']" ).listview();

        $( "[data-role='navbar']" ).navbar();
        $( "[data-role='header']" ).enhanceWithin().toolbar();
    });
    $( document ).on( "pagecreate", function() {alert("pagecreate");
        $( "body > [data-role='panel']" ).panel();
        $( "body > [data-role='panel'] [data-role='listview']" ).listview();
    });
    $( document ).one( "pageshow", function() {alert("page show");
        $( "body > [data-role='header']" ).toolbar();
        $( "body > [data-role='header'] [data-role='navbar']" ).navbar();
    });     
            $( document ).on( "mobileinit", function() {alert("page mobileinit");});
            $( document ).on( "pageinit", function() {alert("page pageinit");});
</script>  

<body>
    <div data-role="header" data-position="fixed" data-theme="a">
      <h3>Login</h3>        
      <a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-home ui-shadow-icon ui-shadow ui-corner-all" href="${pageContext.servletContext.contextPath}"></a>
      <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars ui-shadow-icon ui-shadow ui-corner-all" href="#login-rightmenu"></a>
    </div>    

    <div id="loginPage" data-role="page">
        <div role="main" class="ui-content"></div>
        <div data-role="footer" data-position="fixed"></div>
    </div>
</body>

如果我只是点击two.html中的链接转到one.htm，则不会触发任何事件，也不会显示header。但是如果我按下重新加载按钮来到two.html后，一切都按预期发生。为什么呢？

如果没有按重新加载按钮

0 个答案: