4

test1.htmlとtest2.htmlの2つのページがあります。これらのページの1つが表示されるたびに、コードを実行したいと思います。

2つのページは次のとおりです。

test1.html：

    <!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test1</title>
    <link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head><body>

<div data-role="page" id="test1">

    <div data-role="content">

    <a href="test2.html" data-role="button">jump to test2</a>

    </div>

</div>

<script type="text/javascript">

$(document).on('pageshow', '#test1', function (data) {
    alert('pageshow test1');
});

</script>
</body></html>

test2.html：

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test1</title>
    <link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head><body>

<div data-role="page" id="test2">

    <div data-role="content">

    <a href="test1.html" data-role="button">jump to test1</a>

    </div>

</div>

<script type="text/javascript">
$(document).on('pageshow', '#test2', function (data) {
    alert('pageshow test2');
});
</script>

</body></html>

test1.htmlから始めると、test1に対してのみ（また、test1.htmlに戻るたびに）アラートが表示されますが、test2.htmlに対してはアラートが表示されません。

必要なのは、ページごとに異なるショーハンドラーです。

4

1 に答える 1

2

利用可能なソリューション

解決策 1

まず、ページから JavaScript コードを削除BODYし、単一の js ファイルに入れます。その新しい js ファイルはHEAD、js/jquery.mobile-1.2.0.js の初期化後に配置する必要があります。

このようなもの：

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<script src="js/custom.js"></script>

あなたの場合、jQueryモバイルは2番目のHTMLファイルをロードしていますが、この部分のみ:

<div data-role="page" id="test2">
    <div data-role="content">
        <a href="test1.html" data-role="button">jump to test1</a>
    </div>
</div>

ajax でDOM構造に読み込まれます。これが、2 ページ目のスクリプトが実行されない主な理由です。

解決策 2

2 番目の解決策は、リンクで属性を使用することrel="external"です。これにより、新しいページが開かれるたびにページが強制的にリロードされます。

<a href="test1.html" data-role="button" rel="external">jump to test1</a>

何があっても、可能であればSCRIPTpage 内でタグを使用しないでくださいBODY。動作しますが、同時に追加の問題を引き起こす可能性があります

詳しくは

この問題について詳しく知りたい場合は、その解決方法と例を、個人ブログで作成したこの記事を参照してください。この記事はこのトピックについて直接語っているので、自己宣伝の試みと見なされないことを願っています.

于 2013-01-24T13:49:57.937 に答える