В основном indexPage является корневой страницей. При нажатии на профиль он должен открыть profilePage. Кнопка, которая находится на profilePage, не может вызвать событие click.
IndexPage:
<div data-role="page" data-theme="b" id="indexPage">
<div data-role="header" data-theme="b" class="toolbar">
<h1>Smart Meter</h1>
<a href="#login" data-rel="dialog" data-transition="pop" class="ui-btn-right">Login</a>
<!-- <div data-role="navbar"data-theme="b"> -->
<!-- </div><!-- /navbar -->
</div>
<div id="content" data-role="content">
<table align="center" class="iconGrid">
<tr>
<td>
<a href="#profile" id="liProfile" data-iconpos="top" data-role="button" data-icon="custom" data-transition="slide" data-rel="dialog">Profile</a>
</td>
<td>
<a href="#appliance" id="liAppliance" data-iconpos="top" data-role="button" data-icon="custom" data-transition="slide" data-rel="dialog">Appliance</a>
</td>
</tr>
<tr>
<td>
<a href="#schedule" id="liSchedule" data-iconpos="top" data-role="button" data-icon="custom" data-transition="slide" data-rel="dialog">Schedule</a>
</td>
<td>
<a href="#consumption" id="liConsumption" data-iconpos="top" data-role="button" data-icon="custom" data-transition="slide" data-rel="dialog">Schedule</a>
</td>
</tr>
</table>
</div>
Профиль страницы:
<div data-role="page" id="profilePage">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<label for="name">Name :</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">password :</label>
<input type="password" name="password" id="password" value="" />
</div>
<div data-role="fieldcontain">
<label for="mobileNo">Mobile No. :</label>
<input type="text" name="mobileNo" id="mobileNo" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email Address :</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="address">Address :</label>
<input type="text" name="address" id="address" value="" />
</div>
<div data-role="fieldcontain">
<label for="tariff">Tariff :</label>
<input type="text" name="tariff" id="tariff" value="" />
</div>
<div data-role="fieldcontain">
<label for="budget">Budget :</label>
<input type="text" name="budget" id="budget" value="" />
</div>
<div align="center" style="width:100px;" id="save">
<div id="message"></div>
<a href="#" id="btnSave" data-role="button">Save</a>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->