第一次做用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