jQueryMobile/jQuery在多页网站中的问题

issue with jQueryMobile/jQuery in a multi page site

本文关键字：网站 问题 jQuery jQueryMobile      更新时间：2023-09-26

我对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);
jQM文档：
  • http://jquerymobile.com/demos/1.0.1/docs/api/events.html

重要提示：使用pageInit()，而不是$(document).ready()

在jQuery中学习的第一件事是调用$(document).ready()函数，因此一切都将尽快执行加载DOM。但是，在jQueryMobile中，Ajax用于加载导航时将每个页面的内容放入DOM中，并且DOM已就绪处理程序只对第一页执行。只要加载并创建新页面后，您可以绑定到pageinit事件。本页底部将对此事件进行详细解释。

我还建议阅读JavaScript 中的var Scope和Closures

相关：

  • 为什么变量超出范围

从注释中读取内容时，需要使用pageInit。你试过吗

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

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