проблема с 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 Документы:

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

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

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

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

Связанные:

• Почему переменная выходит за рамки?

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