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>

このページを読み込むと正常に動作し、ボタンに「hello」が表示されますが、次のソース コードのような別の jQuery Mobile ページからリンクすると、ボタンにテキストが表示されずにページが読み込まれます (リンクは表示されません)。どちらでも動作しません):

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

1 に答える 1

0

this is because of the ajax call made by the jquery mobile when you go back to the previous page.

So actually when you click on the button on the second page it directly load the data-role="page" section of the first page via an ajax call and that's the reason that you will not get the script you wrote on the first page which display Hello on button.

So in this case you need to insert the same script on the second page also or you can use a common header on every page if it suits you.

And do not use $(document).ready you should use $(document).on('pageinit'). See the documentation for details here.

So here is you first page:

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

Second page

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

i tested this and it is working for me. You can further optimize the code of these page.

It is better that you go through the official event docs also.

于 2013-01-13T02:54:09.627 に答える