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

前端之家收集整理的这篇文章主要介绍了jquery – 使用Tabs小部件导航到页面会导致整个页面重新加载到选项卡面板中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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:这是一个演示问题的链接.我已经删除了演示问题的链接,因为它是在我的个人网站上托管的,我确认这是一个错误.

解决方法

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

猜你在找的jQuery相关文章