jquery移动页面转换和javascript_Javascript_Jquery_Jquery Mobile

jquery移动页面转换和javascript

javascript jquery jquery-mobile

jquery移动页面转换和javascript,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我有一个index.html，在另一个页面上有一个href按钮，可以显示饼图，但是当我单击该按钮时，图表不会出现，如果我刷新页面，图表就会出现。这是html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

我有一个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>


HybridStatsViewer
高速列车
我的应用程序

您没有发布javascript代码，但我想我知道您的问题所在

所有使用页面高度和宽度（在饼图中）的jQuery插件都必须通过事件初始化。这是因为jQuery移动页面仅在该点具有正确的高度。所以，如果页面高度为0，插件将初始化，但高度设置为0

因此，如果在文档准备或任何其他页面事件期间执行此操作，请将饼图插件初始化切换到evenet

如果您不知道pageshow活动是什么，请查看我的其他详细答案：

编辑：

我已经解决了你的问题

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

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

在我的另一个答案中阅读更多关于它的信息另一个答案：
在饼图页面中添加以下代码并删除
onload=“moteur（）；”
函数

<script> $(document).on('pageshow', '[data-role=page]', function () { moteur(); }); </script>

$（文档）。在（'pageshow'，'[data role=page]'上，函数（）{ 莫图尔（）； });
通过Ajax加载页面时，页面头部引用的任何脚本和样式都不会产生任何效果，但如果页面正常通过HTTP请求，它们将执行。编写jQuery移动站点脚本时，需要考虑这两种情况。当通过Ajax请求时，页面头部被忽略的原因是重新执行相同JavaScript的可能性非常高（通常在站点的每个页面中引用相同的脚本）。由于试图解决该问题的复杂性，我们将执行特定于页面的脚本的任务留给开发人员，并假设每个浏览会话只执行一次头脚本
构建jQuery移动站点时最简单的方法是在每个页面的头部引用相同的样式表和脚本集。如果需要加载特定页面的特定脚本或样式，我们建议将逻辑绑定到pageinit事件（详细信息如下），以便在创建特定页面时运行必要的代码（这可以通过其id属性或许多其他方式确定）。遵循这种方法将确保在直接加载页面或通过Ajax拉入并显示页面时执行代码
页面特定脚本的另一种方法是，当未定义数据角色=页面元素时，在body元素的末尾包含脚本，或者在第一个数据角色=页面元素中包含脚本。如果以这种方式包含自定义脚本，请注意，当通过Ajax或常规HTTP加载该页面时，将执行这些脚本，因此，如果这些脚本在每个页面上都相同，您可能会遇到问题。如果以这种方式包含脚本，我们建议将页面内容封装在data role=“page”元素中，并将在该元素之外的每个页面上引用的脚本放置在该元素中。可以将该页面特有的脚本放在该元素中，以确保在通过Ajax获取页面时执行这些脚本
有关完整的详细信息，请查看我们的此链接

我相信
moteur（）函数初始化饼图。不要使用onload=“ ”，而是添加这段代码$（文档），一旦页面显示，它将初始化饼图。感谢您的帮助，尝试了您的方法。它不起作用，我仍然需要刷新页面。嗯，奇怪，请尝试pagebeforeshow 将其放入页面正文中@Zazoo24我在哪里怎么做都做不到@OmarCan你能把你的项目寄给我吗？或者至少使用js文件。没有它们的IDLE是无用的。邮件：德拉根。gaic@gmail.comI已发送您的固定代码。看一看，告诉我是否一切正常。