1

我在页面上有以下代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 
<div data-role="page" id="quizPage">
        <div data-role="content">   
            <button id="bigButton"></button>
        </div><!-- /content -->
</div><!-- /page -->
</body>

<script>
    $(document).ready(function() { 
        $("#bigButton").html("hello");
        $("#bigButton").button('refresh'); 

    });

    $("#bigButton").click(function() {
        window.location.replace("page2.html");
    });
</script>


</html>

当我加载此页面时，它工作正常并在按钮中显示“你好”，但是当我从另一个带有以下源代码的 jQuery Mobile 页面链接时，页面加载时按钮中没有出现任何文本（并且链接没有也不行）：

<a href="page1.html" data-role="button">click me</a>
4

1 回答 1

0

这是因为当您返回上一页时 jquery mobile 进行了 ajax 调用。

因此，实际上，当您单击第二页上的按钮时，它会data-role="page"通过 ajax 调用直接加载第一页的部分，这就是您不会获得在第一页上编写的脚本并显示Hello在按钮上的原因。

因此，在这种情况下，您还需要在第二页上插入相同的脚本，或者如果适合您，您可以在每个页面上使用通用标题。

并且不使用$(document).ready你应该使用$(document).on('pageinit'). 有关详细信息，请参阅此处的文档。

所以这是你的第一页：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
  $(document).on('pageinit',function(e){
    $("#bigButton").html("hello");
        $("#bigButton").button('refresh');         
    });
</script>  
</head> 
<body>
<div data-role="page" id="quizPage">
        <div data-role="content">   
            <button id="bigButton"></button>
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

第二页

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
  $(document).on('pageinit',function(e){
    $("#bigButton").html("hello");
        $("#bigButton").button('refresh');         
    });
</script> 
</head> 
<body> 
<div data-role="page" id="quizPage">
        <div data-role="content">   
          <a href="main.html"  data-role="button">click me</a>
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

我对此进行了测试，它对我有用。您可以进一步优化这些页面的代码。

最好也阅读官方活动文档。

于 2013-01-13T02:54:09.627 回答