0

jQuery モバイルを使用してシンプルな Web サイトを作成しました。index.phpとの 2 ページで構成されていpageB.phpます。InpageB.phpは jqm ページのヘッダーです。へのリンクを戻しますindex.php：

<a href="index.php">Retour</a>

ではindex.php、ページ ID はwelcome

私の問題は、もし私が

  1. domain.com/ からサイトに入ります
  2. pageB.php(ajax ロード済み)へのリンクをクリックします。
  3. リンクをクリックして戻るindex.php

イベントpageshowは再び発生せず、以前に動的にロードしたコンテンツは存在しません。(タイプ #welcome の新しいページのようです)

しかし、 のリンクを、のページの ID であるpageB.phpへのリンクに置き換えると、 からサイトに入ると、リンクは非アクティブになります。index.php#welcomewelcomeindex.phppageB.php

更新: 問題を再現するための簡略化されたコードを次に示します。

index.php:

<!DOCTYPE HTML>
<html>
<head>
    <!-- Explicit charset definition -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
    <!-- useful for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Includes javascript & css files required for jquery mobile -->
    <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
    <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
    <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
    <div data-role=page id=welcome>
        <div data-role=header>
        <h1>Index</h1>
        </div>
        <div data-role=content>
        <a href="pageB.php">link to pageB</link>
        <script>
            $('#welcome').bind('pageshow', function(){
                alert('pageshow triggered');
            });
        </script>
    </div>
</div>
</body>
</html>

とpageB.php:

<!DOCTYPE HTML>
<html>
    <head>
    <!-- Explicit charset definition -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
    <!-- useful for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Includes javascript & css files required for jquery mobile -->
    <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
    <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
    <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
    <div data-role=page id=pageB>
        <div data-role=header>
        <!--<a href="./index.php#welcome" data-icon="arrow-l">Retour</a>-->
        <a href="./index.php" data-icon="arrow-l">Retour</a>
        <h1>PageB</h1>
        </div>
        <div data-role=content>
            nothing
        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

次の解決策をお勧めします。

まず、javascriptファイルを作成し、test.jsたとえばそれを呼び出します。このファイルには、次のコードを含めます。

function myfunc(){
    alert('pageshow triggered');
}

$(document).delegate('#welcome', 'pageshow', myfunc);

次に、ファイルindex.phpとファイルの両方に次のコードを含めますpageB.php。

- index.php：

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>

    </head>

    <body>
        <div data-role="page" id="welcome">
            <div data-role="header">
                <h1>Index</h1>
            </div>

            <div data-role="content">
                <a href="pageB.php">link to pageB</a>
            </div>
        </div>
    </body>
</html>

- pageB.php：

<!DOCTYPE HTML>
<html>
    <head>

        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>
    </head>

    <body>

        <div data-role="page" id="pageB">
            <div data-role="header">
                <a href="./index.php" data-icon="arrow-l">Retour</a>
                <h1>PageB</h1>
            </div>

            <div data-role="content">nothing</div>  
        </div>
    </body>
</html>

別の解決策は、すべてのjQueryMobileページを1つのHTMLファイルにグループ化することです。

<!DOCTYPE HTML>
<html>
    <head>

        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>
    </head>

    <body>

        <!-- PAGE ONE -->
        <div data-role="page" id="welcome">
            <div data-role="header">
                <h1>Index</h1>
            </div>

            <div data-role="content">
                <a href="#pageB">link to pageB</a>
            </div>
        </div>

        <!-- PAGE TWO -->
        <div data-role="page" id="pageB">
            <div data-role="header">
                <a href="#welcome" data-icon="arrow-l">Retour</a>
                <h1>PageB</h1>
            </div>

            <div data-role="content">nothing</div>  
        </div>
    </body>
</html>

PS：都合に合わせて、ファイル「test.js」のパス/ソースを変更できます。

于 2012-09-16T05:37:42.470 に答える