jquery移动页面转换和javascript
我有一个指向另一个页面的带有href按钮的index.html，用于显示饼图，但当我单击该按钮时，该图表不会出现，如果我刷新该页面，该图表就会出现。这是html页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>the Stats</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
</div><!-- /header -->
<div data-role="content">
<img id='img' src="HSV-logo.png" width=150 />
</div> <!--/content -->
<div class="content-primary">
<ul data-role="listview">
<li><a href="France-10.html" data-inline="true" data- transition="flip"><img src="images/gf.png" alt="France" class="ui-li-icon">France </a></li>
<li><a href="France-30.html" blank" data-inline="true" data-transition="flip"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain </a></li>
<li><a href="chart/raphael_BL.html" data-inline="true" data-transition="flip"><img src="images/gbl.png" alt="Belgium" class="ui-li-icon">Belgium </a></li> </ul>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
</html>以下是饼图的链接页面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HybridStatsViewer</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<!--link rel="stylesheet" href="demo-print.css"media="print"-->
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
<script src="raphael.js"></script>
<script src="pie-10.js"></script>
<script src="moteur.js"></script>
</head>
<body onload="moteur();">
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
<a href="index.html" data-role="button" data-icon="arrow-r" data-theme="c" data-inline="true" data-transition="flip" data-direction="reverse">Back</a>
</div><!-- /header -->
<div id ="holder">
</div>
<a id="bt" href="France-30.html" data-mini="true" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Slide</a>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
回答 3
Stack Overflow用户
发布于 2013-05-16 22:20:33
您没有发布您的javascript代码，但我想我知道您的问题所在。
所有使用页面高度和宽度(在您的示例中为饼图)的jQuery插件都必须通过事件进行初始化。这是因为jQuery移动页面仅在该点具有正确的高度。因此，如果页面高度为0，插件将初始化，但高度设置为0。
因此，如果您在document ready或任何其他页面事件期间执行此操作，请将饼图插件初始化切换为 event。
如果您不知道pageshow事件是什么，请看我的另一个详细答案：
编辑:
我已经解决了你的问题。
要了解这种情况，您需要了解jQuery移动是如何工作的。它使用ajax加载其他页面。
第一页加载正常。它的头部和主体被加载到DOM中，它们在那里等待其他内容。加载第二个页面时，只将其主体内容加载到DOM中。
在我的另一个答案中阅读更多关于它的另一个答案：
Stack Overflow用户
发布于 2013-05-16 22:23:50
在饼图页面中添加以下代码，并删除onload="moteur();"函数。
<script>
$(document).on('pageshow', '[data-role=page]', function () {
moteur();
});
</script>Stack Overflow用户
发布于 2014-05-02 20:02:35
当通过Ajax加载页面时，引用页面头部的任何脚本和样式都不会有任何影响，但如果页面是通过HTTP正常请求的，则它们将执行。在编写jQuery移动站点脚本时，需要考虑这两种情况。当通过Ajax请求页面头部时，页面头部被忽略的原因是重新执行相同JavaScript的可能性非常高(在站点的每个页面中引用相同的脚本是很常见的)。由于尝试解决该问题的复杂性，我们将执行特定于页面的脚本的任务留给开发人员，并假设每个浏览会话头脚本只执行一次。
构建jQuery移动站点时，最简单的方法是在每个页面的头部引用相同的一组样式表和脚本。如果您需要加载特定页面的特定脚本或样式，我们建议将逻辑绑定到pageinit事件(详细信息如下)，以便在创建特定页面时运行必要的代码(这可以由其id属性或许多其他方式确定)。遵循这种方法将确保，如果页面是直接加载的，或者是通过Ajax拉入并显示的，代码就会执行。
如果您以这种方式包含您的自定义脚本，请注意这些脚本将在通过Ajax或常规HTTP加载该页面时执行，因此如果这些脚本在每个页面上都是相同的，那么您可能会遇到问题。如果以这种方式包含脚本，我们建议将页面内容封装在一个data-role=" page“元素中，并在该元素之外的每个页面上放置引用的脚本。可以将该页面独有的脚本放在该元素中，以确保在通过Ajax获取该页面时执行这些脚本。
请查看我们的此链接以了解完整的详细信息.....
http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html
https://stackoverflow.com/questions/16589799
复制相似问题
腾讯云开发者
