проблема с 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> 

, когда я нажимаю ссылку я сохранить идентификатор с JQuery:

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

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

до этого момента, все хорошо. проблема в том, когда я хочу прочитать var test после того, как я нажал на ссылку, она больше не сохраняется.

Что я могу сделать, чтобы предотвратить это?

я хочу сделать что-то вроде этого:

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

Answer 1

jQM Docs:

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

Важно: Используйте pageInit(), не $(document).ready()

Первое, что вы узнаете в JQuery должен код вызова ide $(document).ready() функция, поэтому все будет выполнено, как только загрузится DOM. Однако в jQuery Mobile Ajax используется для загрузки содержимого каждой страницы в DOM при навигации, а обработчик DOM ready выполняется только для первой страницы. Чтобы выполнять код всякий раз, когда загружается и создается новая страница , вы можете привязываться к событию pageinit. Это событие подробно объясняется в нижней части этой страницы.

Я также хотел бы предложить чтение на var Scope и Closures в JavaScript

Связанные:

• 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'); 
        } 
      ); 
});