jquery mobile“.click”事件未执行

Question

基本上indexPage是根页面。单击个人资料时，应该打开个人资料页面。 profilePage 上的按钮无法触发单击事件。

索引页：

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

Answer 1

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



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

Answer 2

将所有 JavaScript 移至所有页面的索引（根页面）。因此，如果 page2 有一些 JavaScript，请将其移动到索引（根）页面。

这是一个工作示例： http://jsfiddle.net/3VnLr/2/

注意我正在使用多页面布局，但所有 JavaScript 都在同一页面上（索引或根）