jquery - 使用选项卡小部件导航到页面会导致整个页面在选项卡面板内重新加载

Question

我在 jQuery 移动应用程序上有一个页面，其中有一个选项卡小部件，如下所示:

<div data-role="tabs" id="dashboard-tabs">
    <div data-role="navbar">
        <ul>
            <li><a href="#tab-events" data-ajax="false" class="ui-icon-calendar ui-btn-icon-left">Upcoming Events</a></li>
            <li><a href="#tab-news" data-ajax="false" class="ui-icon-info ui-btn-icon-left">Latest News</a></li>
        </ul>
    </div>
    <div id="tab-events">
        ...
    </div>
    <div id="tab-news">
        ...
    </div>
</div>

当我直接在浏览器中加载包含此标记的页面时，一切正常。

但是，如果我从另一个页面导航到此页面，事情就会变得很奇怪。整个页面会第二次加载，并在结束后插入新的 div </ul>在原始标记中。看起来这只是针对默认选项卡完成的。

我认为 jQuery Mobile 正在做一些奇怪的事情，当包含它的页面通过 AJAX 加载而不是完整的浏览器页面加载时，它初始化选项卡小部件的方式。我只是不明白为什么或是什么导致了它!

编辑:我已为此悬赏。我忘了提及我正在使用 jQuery 1.11 和 jQuery Mobile 1.4.1。我标记 jQuery UI 的原因是因为 jQuery Mobile 显然直接从那里获取了选项卡小部件，没有改变。

我在 pageinit 时登录和pageshow叫做。当我单击包含选项卡的页面的链接时，每个事件都会触发两次，一次一个。第二个pageinit和pageshow从从 jQM 动态插入页面的 JS 执行，而不是从随第一个应用程序加载而加载的原始 JS 执行。无论这里发生什么，都会导致整个页面被重新加载并插入到 DOM 中，所有 JS 都会被第二次执行。

编辑 2:请注意，这是在没有使用我自己的自定义 JavaScript 的情况下发生的。早些时候，我只是绑定(bind)到 pageinit 和 pageshow，这样我就可以在它们被解雇时进行记录，就是这样。此外，选项卡中的内容似乎也无关紧要。例如，仅将选项卡 Pane 设为空白并不能解决此问题。

编辑 3: 这是演示问题的链接 。我已经删除了演示存在问题的链接，因为它托管在我的个人网站上，并且我确认这是一个错误。

Answer 1

好的，讨论完more on the jQuery Mobile论坛，我opened an issue on github看起来这是一个已确认的问题，与选项卡处理本地链接的方式有关。