JQueryMobile에서 autoInitializePage를 클라이언트 측 생성 컨텐츠와 함께 사용하는 방법은 무엇입니까?

페이지 내용이로드 될 때까지 Jquery Mobile 초기화를 막으려하고 있지만 원하는 결과를 얻지 못하고 있습니다. 이 프로젝트는 간단한 질문/답변 퀴즈입니다.JQueryMobile에서 autoInitializePage를 클라이언트 측 생성 컨텐츠와 함께 사용하는 방법은 무엇입니까?

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

내 document.ready()의 수에 해당 페이지의 콘텐츠를로드 할 수있는 외부 JSON 파일, 중복 #의 Q0를 구문 분석 : 내 HTML 문서에서 나는 3 컨테이너 DIV [데이터 역할 = 페이지]가 퀴즈에 나오는 질문들. 내 문서 헤드에서

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와 모바일로드하기 전에 내가했던 어떤 설정을 구성 말한다 최종 결과는 같은 것입니다. quiz.js의 끝에서 나는 페이지를 초기화하는 호출이 있습니다

$(document).ready(function(){ 

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

    $.mobile.initializePage(); 
});

내 문제는 내가 첫 번째 질문 페이지에 제목 페이지에서 시험을 할 때, 나는 같은에서 박살 질문을 모두 볼 수 있다는 것입니다 시각. document.ready (후

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

)하지만 mobile.initializePage가 호출되기 전에 HTML 같이 렌더링 : 렌더링 된 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"의 데이터 URL로 활성화됩니다.

미리 도움 주셔서 감사합니다.

출처

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();에 대한 호출이 완료 콜백에서 처리되는지 확인해야합니다. 그렇지 않으면 JSON 소스에 대한 AJAX 호출이 완료되기 전에 $.mobile.initializePage();이 호출되는 경쟁 조건이 발생할 수 있습니다.

희망이 도움이됩니다.

출처

2012-07-11 15:23:43

JSON 완료 콜백으로 머리에 못을 박았습니다! $ mobile.initializePage();를 넣어야했습니다. 대신에 getContent() 함수 다음에 내가 있던 곳 대신에. .json 파일 $ .getJSON에서 //로드 퀴즈 컨텐츠 (년대 JS/quiz.json '기능 (데이터) { \t의 getContent (데이터) \t $ .mobile.initializePage(); }); 감사합니다. Nicholas! – emkmail2

+1 나는 이것을 할 길을 찾고있었습니다. 이 솔루션을 얻으려면 정말 좋습니다. – BBdev

JQueryMobile에서 autoInitializePage를 클라이언트 측 생성 컨텐츠와 함께 사용하는 방법은 무엇입니까?

답변

관련 문제