jQuery Mobile : changePage 후에 내용이 제대로로드되지 않습니다.

내 응용 프로그램에 navbar (app2.html)가있는 새 페이지로 연결되는 단추 (app.html)가 있습니다. 내비게이션에는 내부 링크 "page2"가 표시되어야하는 내부 링크 (툴바 2)가 있습니다.jQuery Mobile : changePage 후에 내용이 제대로로드되지 않습니다.

changePage()가있는 버튼에서 이동하면 탐색을 클릭 할 때 내용을 표시 할 수 없습니다. reloadPage가 작동하지 않는 것 같습니다.

app.html은 다음과 같습니다

<body> 
    <!-- Home --> 
    <div data-role="page" id="page3"> 
     <div data-role="content"> 
      <a id="asdf" data-role="button" name="asdf"> 
       Button 
      </a> 
     </div> 
    </div> 
    <script> 
     $('#asdf').click(function(){ 

      $.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true }); 

      }); 

    </script> 
</body>

이 내 app2.html입니다 :

<body> 
    <!-- Home --> 
    <div data-role="page" id="page1"> 
     <div data-role="content"> 
      <div id="navigation" data-role="navbar" data-iconpos="right"> 
       <ul> 
        <li> 
         <a href="app.html" data-theme="" data-icon=""> 
          Toolbar1 
         </a> 
        </li> 
        <li> 
         <a href="#page2" data-theme="" data-icon="check"> 
          toolbar 2 
         </a> 
        </li> 
        <li> 
         <a href="app.html" data-theme="" data-icon=""> 
          Toolbar 3 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div data-role="page" id="page2"> 
     <div data-role="content"> 
      <div data-role="header"> 
       <h3>asdfasd</h3> 
      </div> 
     </div> 
    </div> 
</body>

문제입니까? 나는 jQuery 1.1.1을 jQuery 1.7.1과 함께 사용하고있다.

다음은 파일입니다 app.html app2.html

출처

2012-10-12 cr8z3r

당신은 두 번째 페이지에 두 개의 jQuery를 모바일 페이지를 가질 수 없습니다. app.html의 링크를 클릭하면 app2.html에 대한 ajax 요청을 수행하여 data-role = "page"를 가져오고 html 파일에서만 예상합니다. single page template과 multi-page template의 차이점을 읽어야합니다.

자세한 내용은 "Linking within a multi-page document"을 참조하십시오.

tl; dr : 하나의 HTML 파일에 모든 페이지를 넣고 id에 링크하거나 모든 페이지를 별도의 HTML 파일에 넣고 링크해야합니다.

출처

2012-10-12 17:02:17 gpojd

그러면 Navbar를 클릭 할 때 올바른 div가 어떻게 표시되어야합니까? – cr8z3r

@ cr8z3r 모든 페이지를 자신의 HTML 문서로 만들거나 모든 페이지를 단일 HTML 문서에 배치하여 플러그인을 사용해야하거나 (존재하는 지 확실하지 않음) 두 가지 작업을 모두 수행 할 수 있습니다. 모든 데이터 -role = "page"'첫 번째 요소가 아닌 외부 문서의 요소. – Jasper

여러 페이지 템플릿에 대한 예제를 확인한 결과 정확하게 그 중 하나입니다. 또한 2 페이지가 있습니다. – cr8z3r

jQuery Mobile : changePage 후에 내용이 제대로로드되지 않습니다.

답변

관련 문제