jquery mobile「.click」事件未執行

Question

基本上indexPage是根頁面。當點擊配置文件時，它應該打開profilePage。 profilePage上的按鈕無法觸發點擊事件。

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

<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是在同一頁（索引或根）