0

こんにちは、次のように、モバイル アプリケーションに 2 つの HTML ページがあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton">Index</a>         

</div>



</div>
</body>
</html>

私のexample.htmlは次のようなものです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton1">Test</a>         

</div>

<script type="text/javascript">
    window.onbeforeunload = function(evt) {
        console.log ("*****************");
    } 
</script>




</div>


</body>
</html>

ここで、[インデックス] ボタンをクリックすると、example.html ページに移動するとします。example.html の戻るボタンをクリックすると、再び index.html に移動します。すべて問題ありませんが、console.log (" * ** * **** ");は出力されません。index.htmlをもう一度押すと、それが印刷されます.example.htmlを使用しているときに、戻るボタンをクリックすると印刷されます。

上記のコードで何が問題になっていますか? なぜこのように振る舞うのですか？事前に感謝します。

4

2 に答える 2

2

Jquery Mobile の標準的な使い方では、サイトでホールを体験している間、基本的に同じページにとどまります。onbeforeunload「変更」ページは、基本的にコンテンツを現在のドキュメントに動的に追加します。つまり、イベントをトリガーしません。ただし、jquery mobile eventsを使用できます。これは、実行したいアクションの種類によって異なります。ほとんどの場合、あなたは見ているpagebeforehideか、pagehide

于 2012-10-04T08:00:04.017 に答える
0

できることは、戻るボタンにイベントを追加することです。

ボタンがある場合：

<button id="backButton"> Go Back </button>

イベントに続くjquery経由で追加できます

    $("#backButton).click(function(){
       console.log ("*****************");
   });

ボタンをクリックすると、投稿が行われ、ページが更新されることに注意してください。そのため、別のページのドキュメント準備中にログ機能を追加する必要があります。

example.html ページがロードされたら、このイベントを起動するだけです

$(function(){
   //All code that starts when the page is fully loaded.
    console.log ("*****************");
});
于 2012-10-04T07:25:44.223 に答える