0

我有一个使用 jQuery mobile 的简单网站。它由 2 页index.php和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 类型的新页面）

但是，如果我将链接替换为指向pageB.php的链接index.php#welcome，welcome即 中的页面 id 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" />
</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>

另一种解决方案是将每个 jQuery Mobile 页面分组到一个 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 回答