Navigating to page with Tabs widget causes entire page to re-load inside tab panel

Question

I have a page on a jQuery mobile app that has a tabs widget like so:

<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>

When I load the page containing this markup directly in the browser, everything works fine.

However, if I navigate to this page from another, things get weird. The entire page is loaded a second time and inserted in a new div just after the closing </ul> in the original markup. Looks like this is just done for the default tab.

I'm thinking jQuery mobile is doing something weird with the way it's initializing the tabs widget when the page containing it is loaded via AJAX vs a full browser page load. I just can't figure out why or what is causing it!

Edit: I've placed a bounty on this. I forgot to mention that I'm using jQuery 1.11, and jQuery Mobile 1.4.1. The reason I have jQuery UI tagged is because jQuery Mobile apparently has taken the tabs widget directly from there, unaltered.

I log when pageinit and pageshow are called. When I click a link to the page containing the tabs, each event is fired twice, one at a time. The second pageinit and pageshow are executed from JS that was dynamically inserted into the page from jQM, and not from the original JS that loaded with the first app load. Whatever is happening here is causing the entire page to be reloaded and inserted into the DOM, with all the JS being executed a second time.

Edit 2: Note that this is happening without any of my own custom JavaScript. Earlier I was just binding to pageinit and pageshow so I could log when they were fired, that's it. Also, the content within the tabs seems irrelevant as well. Just making the tab panes blank for instance does not fix it.

Edit 3: Here is a link that demonstrates the problem. I've since removed the link that demo's the problem, since it was hosted on my personal site and I confirmed it was a bug.

Answer 1

Ok, after discussing more on the jQuery Mobile forums, I opened an issue on github and it looks like it's a confirmed issue with how Tabs treats local links.

Answer 2

I will just copy one of their quickest solution that works for me:

$.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();
        }
    }
});