jquery mobile ".click" event not executed

Question

basically the indexPage is the root page. When clicked on the profile it's supposed to open up profilePage. A button that is on profilePage cannot trigger the click event.

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>

profilePage :

<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 -->

Answer 1

Move all JavaScript to the index (root page) for all pages. So if page2 has some JavaScript move it to the index (root) page.

Here is a working example: http://jsfiddle.net/3VnLr/2/

Note I am using the multi page layout but all the JavaScript is on the same page (index or root)

Answer 2

<a href="#" id="btnSave" data-role="button">Save</a>



    $("#btnSave").click(function(e){
        e.preventDefault();
        alert("btnSave is clicked");
        return false;
        });