在多页网站中使用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保存id：

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

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

到目前为止，一切都很好。问题是，当我点击链接后想要读出var test时，它就不再保存了。

我能做些什么来阻止这种情况？

我想做这样的事情：

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

Answer 1

从评论中读取您需要使用pageInit。你试过吗

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

                var test = 0;

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

Answer 2

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 3

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