jQuery Mobile中的页面加载与跳转机制

第一次做用jQuery Mobile做东西，发现一些跟平时的思维习惯不太一样的。其中这个框架的页面加载机制便是其中一个。如果不明白其中的奥秘，往往会出现一些让人摸不着头脑的怪现象，比如页面进入后点击按钮后Javascript就是不执行，而用F5刷新页面后又可以正常执行等。

即使我们明白了HTML文件与jQuery Mobile中page概念的区别，也还是不能解决上述问题。当然，了解这个是一个大前提。原来，jQuery Mobile是用Ajax的方式加载所有HTML中的标记data-role="page"的DIV元素中，第一个HTML页面一般都是完全加载，包括 HEAD 和BODY 都会被加载到DOM中，完成后便是链接到的其他页面内容的加载。第二个HTML页面只有 BODY 中的内容会被以Ajax的方式加载到头一个HTML的 DOM中。 并且第二HTML页面的 BODY 中的内容也并非全部加载，而仅仅是其中的第一个带data-role="page"属性的DIV会被加载进去，其余的东西则无缘进入页面渲染。

直接上代码，或许更容易让人明白些：

index.html

<!DOCTYPE html>

    <html lang="en">

        <head>

            <!-- META TAGS Declaration -->

            <meta charset="UTF-8">

            <title>TEst</title>

            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />

            <meta name="apple-mobile-web-app-capable" content="yes" />

            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

            <script>

            $(document).on('pagebeforeshow', '#foo', function(){

                alert($('#body-test').html());

            });

            </script>

        </head>

        <body id="body-test">

            <div data-role="page" id="portfolio"  data-add-back-btn="true">

                <div data-role="content" data-theme='c' >

                    <a href="test.html" data-role="button">Go to Bar</a>

                </div>

            </div><!-- Page Project #1 -->

        </body>

</html>

test.html

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />

        <script src="jquery-js/jquery-1.10.1.js"></script>

        <script src="jquery-js/jquery.mobile-1.3.1.js"></script>

        <title>Foobar</title>

    </head>

    <body>

        <div data-role="page" id="foo">

            <div data-role="content">

                <a href="#bar" data-role="button">Go to Bar</a>

            </div>

        </div>

        <div data-role="page" id="bar">

            <div data-role="content">

                <p>Bar</p>

            </div>

        </div>

    </body>

</html>

参考资料来源：http://stackoverflow.com/questions/17403825/link-fails-to-work-unless-refreshing/17403907#17403907