點擊jQuery Mobile的一個按鈕，鏈接，導致pageinit胡作非爲

我有一個頁面上下面的代碼：點擊jQuery Mobile的一個按鈕，鏈接，導致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> 
</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>

來源

2013-01-10 fakeguybrushthreepwood

可能的重複[鏈接到頁面時，按鈕文本（基於JSON調用）未加載]同一個人詢問同一個問題。（http://stackoverflow.com/questions/14236170/when-linking-to-a-page-the-button-text-based-off-json-call-isnt-loading） – andleer

這是因爲Ajax調用當你回到前一頁時，由jquery mobile創建。

因此，實際上當您點擊第二頁上的按鈕時，它會通過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也是。

來源

2013-01-13 02:54:09 Peeyush

點擊jQuery Mobile的一個按鈕，鏈接，導致pageinit胡作非爲

回答

相關問題