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

我在jQuery移动应用程序上有一个页面,它有一个标签小部件,如下所示:

 

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

但是,如果我从另一个页面导航到这个页面,事情会变得奇怪。 整个页面第二次加载并插入原始标记中关闭

之后的新div中。 看起来这只是为默认选项卡完成的。

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

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

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

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

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

好的,在讨论了jQuery Mobile论坛的更多内容之后,我在github上打开了一个问题,看起来这是Tabs如何处理本地链接的确认问题。

我将复制一个对我有用的最快解决方案:

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

我发现添加

 data-ajax="false" 

到你跳过的链接,将解决这个问题。