Jquery mobile：链接回索引.php不会再次触发页面显示

我有一个使用jQuery mobile的简单网站。它由index.php和pageB.php两个页面组成。在pageB.php中是jqm页面的标题。我把链接放回index.php:

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

在index.php中，页面id为welcome

我的问题是，如果我

从domain.com输入网站/
单击指向pageB.php的链接（已加载ajax）
单击返回index.php的链接

事件pageshow不会再次触发，并且我以前动态加载的内容不存在。（似乎是#welcome类型的新页面）

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

我建议以下解决方案：

首先，创建一个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"的路径/源。

相关内容

最新更新

热门标签：