Question

使用jquery mobile成功调用ajax后，我无法更改背景颜色/图像。

这是我正在使用的代码。成功调用ajax后调用以下函数。

function apply_customisations(tmpCustomisations) {
    var customisations = JSON.parse(tmpCustomisations);
    console.log(customisations.inputBackColor);
    $('.ui-page, .ui-panel-wrapper').css('background', customisations.inputBackColor + ' !important');
    $('.ui-header .topbar').css('background', customisations.inputhfColor + ' !important');
    $('#btnBegin').css('background', '#FFF !important');
}

PAGE HTML MARK UP ---

<div data-role="page" id="introPage" data-theme="a" class="pagetype">

    <header data-role="header" data-position="fixed">
        <div class="topbar">
            <span class="titleOnTopBar">Question Intro</span>
            <a href="#" onclick="history.back(-1)" class="leftOnTopBar"><img class="topBackButton" src="menu_icons/back-btn.png" /></a>
            <!--<a href="#externalpanel" class="rightOnTopBar"><img class="topMenuButton" src="menu_icons/menu-btn.png" /></a>-->
        </div>
    </header>

    <div data-role="content" style="text-align: center;">
        <div id="queIntro"></div>
        <button id="btnBegin" onclick="begin()" class="blueThemeButton">Begin</button>
        <div id="dataPopulate"></div>
    </div>

    <footer data-role="footer" class="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" data-theme="none">
        <nav data-role="navbar">
            <ul>
                <li><a class="btnFavourite"><img src="img/info-icon.png" class="footer_icon"/>Info</a></li>
                <li><a href="#" class="btnHelp"><img src="img/help-icon.png" class="footer_icon"/>Help</a></li>
                <li><a href="#" class="btnContact"><img src="img/contact-icon.png" class="footer_icon"/>Contact</a></li>
            </ul>
        </nav>
    </footer>
</div><!-- /page -->

正如您在上面所看到的，我正在尝试更改三个元素的背景颜色，但上述工作都没有。对于函数中的最后一个元素，我传递#FFF值只是为了确保传递正确的十六进制值。

我也做了以下但没有解决问题。

$('.ui-page, .ui-panel-wrapper').trigger("pagecreate");

jQuery Mobile在Ajax之后更新页面样式

0 个答案: