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>

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

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

我认为当包含它的页面通过AJAX加载完整的浏览器页面加载时，jQuery mobile正在做一些奇怪的事情。我无法弄清楚为什么或导致它的原因！

编辑：我已经为此付出了赏金。我忘了提到我正在使用jQuery 1.11和jQuery Mobile 1.4.1。我有jQuery UI标记的原因是因为jQuery Mobile显然直接从那里获取了制表符小部件，没有改变。

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

编辑2 请注意，如果没有我自己的自定义JavaScript的任何，就会发生这种情况。之前我只是绑定到pageinit和pageshow所以我可以记录他们被解雇时，就是这样。此外，选项卡中的内容似乎也无关紧要。仅仅将选项卡窗格设置为空白并不能解决问题。

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

Answer 1

好的，在讨论了more on the jQuery Mobile论坛之后，我opened an issue on github看起来这是Tabs如何处理本地链接的确认问题。

Answer 2

我将复制一个对我有效的their最快解决方案：

$.widget( "ui.tabs", $.ui.tabs, {

    _createWidget: function( options, element ) {
        var page, delayedCreate,
            that = this;

        if ( $.mobile.page ) {
            page = $( element )
                .parents( ":jqmData(role='page'),:mobile-page" )
                .first();

            if ( page.length > 0 && !page.hasClass( "ui-page-active" ) ) {
                delayedCreate = this._super;
                page.one( "pagebeforeshow", function() {
                    delayedCreate.call( that, options, element );
                });
            }
        } else {
            return this._super();
        }
    }
});

Answer 3

我发现添加

data-ajax="false"

到你跳过的<a>链接，将解决这个问题。

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

3 个答案: