jquerymobile：链接回index.php'；我不能再表演了_Mobile_Jquery Mobile_Event Handling_Jquery

jquerymobile：链接回index.php'；我不能再表演了

mobile jquery-mobile jquery

jquerymobile：链接回index.php'；我不能再表演了,mobile,jquery-mobile,event-handling,jquery,Mobile,Jquery Mobile,Event Handling,Jquery,我有一个使用jQuery mobile的简单网站。它由两个页面组成，index.php和pageB.php。php中的pageB.php是jqm页面的标题。我把一个链接放回index.php： <a href="index.php">Retour</a> <!DOCTYPE HTML> <html> <head>  <meta h

我有一个使用jQuery mobile的简单网站。它由两个页面组成，

index.php

和

pageB.php

。php中的

pageB.php

是jqm页面的标题。我把一个链接放回

index.php

：

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

<!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>

<!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>

<!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>

<!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>

和

pageB.php

：

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

<!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>

<!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>

<!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>

<!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>


PageB
没有什么

我建议以下解决方案：

首先，创建一个javascript文件，并将其称为

test.js

。在此文件中，包括以下代码：

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

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

然后，为文件

index.php

和

pageB.php

包含以下代码：

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

<!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>

<!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>

<!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>

<!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>

index.php

：

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

<!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>

<!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>

<!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>

<!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移动页面分组到一个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>


指数
PageB
没有什么

PS:您可以根据自己的方便更改文件“test.js”的路径/源。

显示您的代码。没有它我们无法调试。我添加了一个示例代码，我很惊讶没有什么特别的东西会导致出现此问题嘿，伙计，对不起，我犯了一些错误。。。请重试该代码（我更改了以前的帖子）。正常情况下，它应该能工作。让我知道你的成绩，伙计。。。您使用了哪种解决方案？第一个还是第二个？第一个应该可以工作，我将在我的环境中测试第二个。我也测试了第二个解决方案，它可以工作，什么不工作？您是否看到任何带有“pageshow triggered”（页面显示已触发）的警报消息？第一种解决方案有效，但事件已触发两次，但使用多页模板IE似乎不会在pageB上触发事件页面显示。第二个什么都不做。。。你在用IE？嗯。。。这可能就是我得到另一个结果的原因：S（我正在使用Firefox:）。等等，伙计，我要换个位子。