jQuery Mobile：转到新的html页面禁用转换

Question

我有一个带有导航栏和页脚的页面，如截图：

此页面的代码简化，对于页面议程/ people / info是相同的：

    <div data-role="page" data-id="access-dataid" id="page-infos-access" data-theme="a">
        <div data-role="header" data-id="header-app" data-position="fixed">
            <div data-role="navbar" data-id="head-navbar">
                <ul>
                    <li><a href="#page-infos-access" data-id="access-link" class="ui-btn-active ui-state-persist" id="custom-header-nav-active">Access</a></li>
                    <li><a href="#page-infos-contact" data-id="contact-link" data-transition="slide">Contact</a></li>
                </ul>
            </div>
        </div>

        <div data-role="content" data-theme="a">
        </div>

        <div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="agenda.html" id="agenda-icon" data-icon="custom">Agenda</a></li>
                    <li><a href="people.html" id="people-icon" data-icon="custom">People</a></li>
                    <li><a href="#" class="ui-btn-active ui-state-persist"  id="infos-icon" data-icon="custom">Infos</a></li>
                </ul>   
            </div>
        </div>
    </div>

    <div data-role="page" data-id="contact-dataid" id="page-infos-contact" data-theme="a">
        <div data-role="header" data-id="header-app" data-position="fixed">
            <div class='ui-title'>
            <div data-role="navbar" data-id="head-navbar">
                <ul>
                    <li><a href="#page-infos-access" data-id="access-link" id="custom-header-nav-active">Access</a></li>
                    <li><a href="#page-infos-contact" data-id="contact-link" class="ui-btn-active ui-state-persist" data-transition="slide">Contact</a></li>
                </ul>
            </div>
        </div>

        <div data-role="content" data-theme="a">
        </div>

        <div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="agenda.html" id="agenda-icon" data-icon="custom">Agenda</a></li>
                    <li><a href="people.html" id="people-icon" data-icon="custom">People</a></li>
                    <li><a href="#" class="ui-btn-active ui-state-persist"  id="infos-icon" data-icon="custom">Infos</a></li>
                </ul>   
            </div>
        </div>
    </div>

基本上对于navBar菜单我隐藏并显示部分html但我没有加载新页面。一切正常，我可以从导航栏项目“访问”更改为“联系人”。

问题是当我点击底部并加载像“people.html”这样的新页面时，使用完全相同系统的navBar项目不起作用。我看到了新页面，但是当我点击顶部项目时，没有任何事情发生，比如JS错误......

有什么想法吗？