Question

I’m using Jquery mobile for my mobile application. before I changing a page I want to make some CSS changes on that page. When I am setting for example adding class to id of the next page,or color change: $("#divA1").css("background-color","blue");

It change the same id on the current page (if it exist) and only then change next page. How can I set my CSS settings while on one page but load the next page with those CSS settings.

Answer 1

In most scenarios, jQuery Mobile loads additional pages into the DOM via ajax calls. This is a fairly fundamental part of how it works and you should insure that all markup IDs across all pages are unique.

<div id="page1" data-role="page">
    <div data-role="content">
        <div id="myContent1"></div>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">
        <div id="myContent2"></div>
    </div>
</div>

If your pages contain similar sub-componants, consider a class instead:

<div id="page1" data-role="page">
    <div data-role="content">
        <div class="myContent"></div>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">
        <div class="myContent"></div>
    </div>
</div>

Classes allow for selection such as $("#page1.myContent").css("background-color");