Data-Theme not applying to Subpage - JQuery mobile and Phonegap

Data-Theme not applying to Subpage - JQuery mobile and Phonegap

I am trying to develop in an application, which is based on Phonegap and
JQuery Mobile framework.
I have created a Page and Sub Page as separate HTML files.
The body part of the index.html file will look like:
<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"
data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="page2.html#p2" rel="external">Link1</a></li>
<li><a href="page3.html#p3" rel="external">Link2</a></li>
</ul></div></div>
The body part of page2.html file will look like:
<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"
data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="index.html#p1" rel="external">Go Back</a></li>
</ul></div></div>
The data-theme="e" is successfully getting applied to index.html, whereas
it is not getting applied to page2.html. Can someone please provide me
with the reasons, for this behavior..?
I am using JQuery 1.8.3 and JQuery Mobile 1.2.1 version and I am properly
calling the CSS and JS versions from local storage in both the HTML files
(ex: /android_asset/www/css/jquery.mobile-1.2.1.css, ex:
/android_asset/www/js/jquery-1.8.3.js/)
Also, another question lingering in my mind is, I am unable to call the
CLICK event for Link1, when I keep the body content of page2.html in the
same HTML file as index.html, as a SubPage; upon click on Link1, I am not
redirected to Page2.html, even though I give href="#p2", instead of
href-"page2.html#p2".