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

转载于:https://www.cnblogs.com/pinocchioatbeijing/p/3463857.html