Javascript 转换：JQuery Mobile无法识别主题

我正在使用JQuery Mobile 1.4.2创建一个JQuery Mobile WebApp。加载新页面时，页面转换期间会短暂发生视觉错误：

我认为这是一个问题，因为在转换期间没有应用主题，当下一页完全加载时，主题再次正确显示

以下是这两个页面的属性：

data-theme=“a”

页面声明：

<section id="landmarks" data-role="page" data-theme="a">

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>

后退按钮声明：

<section id="landmarks" data-role="page" data-theme="a">

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>

JSFIDLE（单击“第2页”按钮，请注意过渡期间导航栏颜色的变化）：

在呈现页面之前，是否应该调用某个函数来正确呈现“后退”按钮和标题栏文本？

标题中的数据id=“appHeader”导致了该问题。删除该属性，您的小提琴就可以正常工作：

---

如果您查看jQM参考（），您将看到框架使用data-id。

您的示例使用了旧的jQuery之前的移动方式来实现永久的页脚/页眉

jquerymobile使用完全不同的方法

工作示例：

HTML:

---

请提供一个工作样本小提琴…我添加了一个样本JS小提琴。请注意过渡期间导航栏颜色的变化。关于为什么会发生这种情况，您有什么想法吗？这里的数据id是有原因的，它用于在内容转换期间防止页眉/页脚转换。它仍然有效，但效果很差。好吧，假设他真的需要这个功能：）@Gajotres，谢谢你的澄清！我不知道为什么会这样。

<header data-role="header" data-position="fixed" data-id="appHeader" id="appHeader">
    <h1>Page 1</h1>
</header>

<section data-role="page" data-theme="b" id="page1">    
    <div data-role="content">
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</section>

<section data-role="page" data-theme="b" id="page2">    
    <div data-role="content">
        <a href="#page1" data-role="button" data-transition="slide" data-direction="reverse">Page 21</a>
    </div>    
</section>

$( document ).ready(function() {
    $('#appHeader').enhanceWithin().toolbar();
});

$(document).on('pagecontainershow', function () {
    activePage = $('body').pagecontainer('getActivePage');
    pageId = activePage.prop('id'); 

    if (pageId === 'page1') {
        activePage.parent().find('.ui-header h1').html('Page 1');
    }

    if (pageId === 'page2') {
        activePage.parent().find('.ui-header h1').html('Page 2');
    }    
});