如何在客戶端生成的內容中使用JQueryMobile中的autoInitializePage？

我試圖阻止Jquery Mobile初始化，直到頁面內容被加載後，但我沒有得到想要的結果。該項目是一個簡單的問答測驗。在我的HTML文件我有3周集裝箱的div [數據角色=頁]：如何在客戶端生成的內容中使用JQueryMobile中的autoInitializePage？

div[data-role=page]#pg_title 
div[data-role=page]#q0 
div[data-role=page]#result

我的document.ready（）解析外部JSON文件來加載內容到這些網頁，複製＃Q0到的數測驗中的問題。最終的結果是一樣的東西：

div[data-role=page]#pg_title 
div[data-role=page]#q0 
div[data-role=page]#q1 
div[data-role=page]#q2 
div[data-role=page]#q3 
div[data-role=page]#q4 
div[data-role=page]#result

在我的文件頭，我有：

<script> 
    $(document).bind("mobileinit", function() { 
     $.mobile.autoInitializePage = false; 
    }); 
</script> 
<script src="js/quiz.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html說加載jQuery Mobile的之前配置的設置，這是我做了什麼。在quiz.js結束時，我必須調用初始化頁面：

$(document).ready(function(){ 

    // ... all the code to load JSON quiz content is here 

    $.mobile.initializePage(); 
});

我的問題是，當我從扉頁第一個問題頁面進行，我看到所有的在同一撕心裂肺的問題時間。渲染HTML看起來像這樣：

<div data-role="page" id="q0" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div> 
<div data-role="page" id="q1" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div> 
<div data-role="page" id="q2" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div> 
<div data-role="page" id="q3" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div> 
<div data-role="page" id="q4" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>

的document.ready（後），但mobile.initializePage被調用之前的HTML呈現爲：

<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">...</div> 
<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">...</div> 
<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">...</div> 
<div data-role="page" id="q4" class="pg_type_question" data-title="Quiz Title">...</div> 
<div data-role="page" id="q5" class="pg_type_question" data-title="Quiz Title">...</div>

我不明白爲什麼每一個問題網頁是成爲使用「q0」的數據網址激活。

在此先感謝您的幫助！

來源

2012-07-11 emkmail2

沒有看完整頁就有點難說了。這裏有一個例子，我把你描述的東西放在一起。 autoInitializePage設置爲false（之前 jQuery Mobile獲取加載），一些元素在頁面加載後被添加到DOM，然後$.mobile.initializePage();在頁面擺弄完畢後被調用。 jQuery Mobile然後按預期初始化它，並且導航鏈接似乎工作。

<html> 
    <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).bind("mobileinit", function() { 
      $.mobile.autoInitializePage = false; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('body').append(
       '<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">' + 
        '<div data-role="header">' + 
         '<h1>Page 1</h1>' + 
        '</div>' + 
        '<div data-role="content">' + 
         '<h2>Content</h2>' + 
         '<p><a href="#q2" data-role="button">To Page 2</a></p>' + 
        '</div>' + 
       '</div>' + 
       '<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">' + 
        '<div data-role="header">' + 
         '<h1>Page 2</h1>' + 
        '</div>' + 
        '<div data-role="content"> ' + 
         '<h2>Content</h2>' + 
         '<p><a href="#q3" data-role="button">To Page 3</a></p> ' + 
        '</div> ' + 
       '</div>' + 
       '<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">' + 
        '<div data-role="header">' + 
         '<h1>Page 3</h1>' + 
        '</div>' + 
        '<div data-role="content">' + 
         '<h2>The End</h2>' + 
        '</div>' + 
       '</div>' 
      ); 

      $.mobile.initializePage(); 
     }); 
    </script> 
    </head> 
    <body> 
    <div data-role="page" id="title" data-title="Quiz Title"> 
     <div data-role="header"> 
      <h1>Title Page</h1> 
     </div> 
     <div data-role="content"> 
      <h2>Welcome</h2> 
      <p><a href="#q1" data-role="button">To Page 1</a></p> 
     </div> 
    </div> 
    </body> 
</html>

雖然玩弄，我也注意到，[div data-role="page"]要素確實需要是彼此的兄弟姐妹;請檢查以確保您不會意外將它們全部附加到標題頁或除正文以外的父元素。

如果您要調用外部JSON源，則需要確保在完成回調中處理對$.mobile.initializePage();的調用;否則，在AJAX調用JSON源的完成之前，您最終會調用$.mobile.initializePage();的爭用條件。

希望這會有所幫助！

來源

2012-07-11 15:23:43

你用JSON完成回調擊中了頭部！我需要把$ mobile.initializePage（）;在我的getContent（）函數之後，而不是我擁有它的地方。從以.json文件 $ .getJSON //負載測驗內容（ 'JS/quiz.json'，函數（數據）{ \t的getContent（數據）; \t $ .mobile.initializePage（）; }）; 謝謝尼古拉斯！ – emkmail2 2012-07-11 15:32:10

+1我正在尋找一種方法來做到這一點。真的很高興得到這個解決方案。 – BBdev 2013-09-06 11:06:47

如何在客戶端生成的內容中使用JQueryMobile中的autoInitializePage？

回答

相關問題