多頁面網站中的jQueryMobile/jQuery問題

Question

我有jQuery和jQueryMobile的問題。

我有2頁網站：

<div data-role="page" id="main"> 
     <div data-role="header"> 
      header1 
     </div> 
     <div data-role="content"> 
      <a id="1" href="#detail">link</a> 
     </div> 
    </div> 

    <div data-role="page" id="detail"> 
     <div data-role="header"> 
      header2 
     </div> 
     <div data-role="content"> 
      <div id="foo">content2</div> 
     </div> 
    </div> 

當我按下鏈接我保存ID使用jQuery：

$(document).ready(function(){ 
       var test = 0; 

       $('a').click(
         function() 
         { 
          test= $(this).attr('id'); 
         } 
       );   
      }); 

這一點，一切都很好。問題是，當我點擊鏈接後想要讀出var test時，它不再被保存。

我能做些什麼來防止這種情況發生？

我要讓這樣的事：

$('#foo').html(test); 

Answer 1

JQM文件：

• http://jquerymobile.com/demos/1.0.1/docs/api/events.html

重要須知：pageInit()，不$(document).ready()

你的jQuery學習的第一件事就是調用代碼插件請參閱 $(document).ready()函數，以便在加載DOM時儘快執行所有操作。但是，在jQuery Mobile中，Ajax用於在導航時將每個頁面的 內容加載到DOM中，DOM準備好的 處理程序僅對第一頁執行。要在加載和創建新頁面時執行代碼，可以綁定到pageinit事件。 此事件在本頁底部詳細解釋。

我也建議在JavaScript中閱讀var Scope和Closures

相關：？

• Why the variable is out of scope?

Answer 2

從您的意見，您需要使用pageInit閱讀。你試過

$('#main').live('pageinit',function(event){ 

       var test = 0; 

       $('a').click(
         function() 
         { 
          test= $(this).attr('id'); 
         } 
       ); 
}); 

Answer 3

var test = 0; 
$('#main').live("pageshow",function(event){ //or pageinit, or pagecreate 
    $('a').click(
        function() 
        { 
         test= $(this).attr('id'); 
        } 
      ); 
});