동적 데이터로드 및 새로 고침이 작동하지 않는 이유는 무엇입니까?

jQuery load를 사용하여 내 페이지에서 외부 데이터를로드 한 다음 jQuery Mobile을 다시 실행하여 테마 등을 트리거와 함께 적용하려고합니다. 데이터는 잘로드되었지만 제대로 재 스키닝되지 않습니다. 내 전체 프로젝트가 너무 커서 작은 예제를 함께 보여 주기만하면됩니다.동적 데이터로드 및 새로 고침이 작동하지 않는 이유는 무엇입니까?

나는 a.html 있습니다

<!DOCTYPE html> 
<html> 
     <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Test</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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>  
function replaceData1() { 
$("#a-page").load("b.html"); 
$("#a-page").trigger('create'); 
}  
    </script> 
</head> 
<body> 

<div data-role="page" id="a-page"> 
      <div data-role="header" data-theme="a">Header A</div><!-- /header --> 

      <div data-role="content" id="a-content"> 
      Content A 
      <button onClick="replaceData1()">goto B</button> 
      </div><!-- /content --> 

      <div data-role="footer">Footer A</div><!-- /footer --> 

      </div><!-- /page --> 
</body> 
</html>

을 그리고 b.html 있습니다

<div data-role="header" data-theme="d">Header B</div><!-- /header --> 

     <div data-role="content" id="b-content">Content B</div><!-- /content --> 

     <div data-role="footer">Footer B</div><!-- /footer -->

b.html 완전한 HTML 파일, 바로 만족하지합니다. 이 문제가 발생하는지 확실하지 않습니다.

그럼에도 불구하고 a.html을로드하고 버튼을 클릭하면 b.html의 내용이 올바르게로드되지만 제대로 테마되지 않습니다. 나중에 트리거 ('create')를 실행하더라도 작동하지 않습니다. 나는 무엇을 잘못 했는가? 누군가가 이것을 다시 써서 내가 의도 한대로 작동하도록 할 수 있습니까? 경우에 질문은 :

출처

2012-10-28 Se7enDays

[유래 작품도 살펴 보시기 바랍니다 방법 (http://stackoverflow.com/faq#howtoask가) 시도 대답의 왼쪽에있는 확인란 개요를 클릭하여 대답을 표시하십시오. – Taifun

는이

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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="a-page"> 
    <div data-role="header" data-theme="a">Header A</div><!-- /header --> 
    <div data-role="content" id="a-content">Content A <button onClick="$.mobile.changePage('#b-page');">goto B</button></div><!-- /content --> 
    <div data-role="footer">Footer A</div><!-- /footer --> 
    </div><!-- /page --> 

    <div data-role="page" id="b-page"> 
    <div data-role="header" data-theme="d">Header B</div><!-- /header --> 
    <div data-role="content" id="b-content">Content B <button onClick="$.mobile.changePage('#a-page');">goto A</button></div><!-- /content --> 
    <div data-role="footer">Footer B</div><!-- /footer --> 
    </div><!-- /page --> 

</body> 
</html>

screenshot1

screenshot2

출처

2012-10-28 19:45:11 Taifun

동적 데이터로드 및 새로 고침이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제