2

円グラフを表示する別のページへの 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>

4

3 に答える 3

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 を再実行する可能性が非常に高いためです (サイトのすべてのページで同じスクリプトを参照するのは一般的です)。この問題を回避する試みは複雑であるため、ページ固有のスクリプトを実行するタスクは開発者に任せ、ヘッド スクリプトはブラウジング セッションごとに 1 回だけ実行されると想定しています。

jQuery Mobile サイトを構築する際の最も簡単な方法は、すべてのページのヘッドで同じスタイルシートとスクリプトのセットを参照することです。特定のページに特定のスクリプトまたはスタイルをロードする必要がある場合は、ロジックを pageinit イベント (詳細は後述) にバインドして、特定のページが作成されたときに必要なコードを実行することをお勧めします (これは、id 属性または数値によって決定できます)。他の方法の）。このアプローチに従うと、ページが直接読み込まれた場合、または Ajax を介して取り込まれて表示された場合に、コードが確実に実行されます。

ページ固有のスクリプト作成のもう 1 つの方法は、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 に答える