2

我有一个 index.html 带有指向另一个页面的 href 按钮来显示饼图，但是当我单击该按钮时，图表不会出现，然后如果我刷新页面，图表就会出现。这是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>

4

3 回答 3

2

您没有发布您的 javascript 代码，但我想我知道您的问题是什么。

所有使用页面高度和宽度（在您的情况下为饼图）的 jQuery 插件必须通过pageshow事件进行初始化。这是因为 jQuery Mobile 页面仅在该点具有正确的高度。因此，如果页面高度为 0，插件将初始化但高度设置为 0。

因此，如果您在文档就绪或任何其他页面事件期间执行此操作，请将您的饼图插件初始化切换到pageshow eventet。

如果您不知道什么是 pageshow 事件，请查看我的其他详细答案：jQuery Mobile: document ready vs page events

编辑 ：

我已经解决了你的问题。

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 来加载其他页面。

第一页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。当第二个页面被加载时，只有它的 BODY 内容被加载到 DOM 中。

在我的其他答案中阅读更多关于它的其他答案：为什么我必须将所有脚本放入 jquery mobile 中的 index.html

于 2013-05-16T14:20:32.627 回答
1

在饼图页面中添加以下代码并删除onload="moteur();"功能。

<script>
$(document).on('pageshow', '[data-role=page]', function () { 
 moteur();
});
</script>
于 2013-05-16T14:23:50.087 回答
0

当通过 Ajax 加载页面时，引用页面头部的任何脚本和样式都不会产生任何影响，但如果通过 HTTP 正常请求页面，它们将执行。在编写 jQuery Mobile 站点脚本时，需要考虑这两种情况。通过 Ajax 请求时忽略页面头部的原因是重新执行相同 JavaScript 的可能性非常高（在站点的每个页面中引用相同的脚本很常见）。由于尝试解决该问题的复杂性，我们将执行页面特定脚本的任务留给开发人员，并假设每个浏览会话只执行一次头部脚本。

构建 jQuery Mobile 站点时最简单的方法是在每个页面的头部引用相同的样式表和脚本集。如果您需要为特定页面加载特定脚本或样式，我们建议将逻辑绑定到 pageinit 事件（详细信息如下）以在创建特定页面时运行必要的代码（可以由其 id 属性或数字确定其他方式）。如果页面直接加载或通过 Ajax 拉入并显示，遵循这种方法将确保代码执行。

页面特定脚本的另一种方法是在未定义 data-role=page 元素时在 body 元素的末尾包含脚本，或者在第一个 data-role=page 元素内包含脚本。如果您以这种方式包含自定义脚本，请注意这些脚本将在通过 Ajax 或常规 HTTP 加载该页面时执行，因此如果这些脚本在每个页面上都相同，您可能会遇到问题。如果您以这种方式包含脚本，我们建议将您的页面内容包含在 data-role="page" 元素中，并放置在该元素之外的每个页面上引用的脚本。该页面独有的脚本可以放置在该元素中，以确保它们在通过 Ajax 获取页面时执行。

查看我们的此链接以获取完整的详细信息.....

http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html

于 2014-05-02T12:02:34.773 回答