Question

我在页面上有以下代码：

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

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

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

Answer 1

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

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

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

不要使用$(document).ready您应该使用$(document).on('pageinit')。有关详细信息，请参阅文档here。

所以这是第一页：

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

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

最好还是通过official event docs。

单击jQuery Mobile中的按钮链接会导致pageinit行为异常

1 个答案: