동적으로로드 된 내용보다 jQuery 모바일 스타일이 적용되지 않습니다.

사용자가 성공적으로 로그인 할 때 Ajax 및 json 구문 분석을 통해로드 된 여러 페이지 템플릿 컨텐츠를 동적으로 표시해야하는 jQuery 모바일 앱이 있습니다. 따라서 두 가지 문제가 있습니다.동적으로로드 된 내용보다 jQuery 모바일 스타일이 적용되지 않습니다.

1 1. 동적 컨텐츠 생성을 위해 문서 준비 기능에서 올바른 호출 아약스를 사용합니다.

2. 콘텐츠가 동적으로 생성 될 때 jQuery 모바일 스타일이 전달되지 않습니다.

$('#pageData').page('refresh', true);

그것은 JQuery와 모바일 스타일을 렌더링 할 수있는 요소를 실행해야합니다

여기에 내 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" /> 
<script src="cordova-2.4.0.js"></script> 
<script src="js/jquery-1.8.2.min.js"></script> 
<script src="js/jquery.mobile-1.3.0.min.js"></script> 
<script> 
$(document).ready(function() { 
     $ 
       .ajax({ 
        url : "demourl.com", 
        type : "GET", 
        success : function(data) { 
         var msgData = $.parseJSON(data);     

          $("<div data-role='page'>").appendTo("#pageData") 
            .trigger("create"); 
          $("<div data-role='header'>").appendTo("#pageData") 
            .trigger("create"); 
          $("<h1>Page Title</h1>").appendTo("#pageData") 
            .trigger("create"); 
          $("<div>").appendTo("#pageData").trigger("create"); 
          $("<div>").appendTo("#pageData").trigger("create");      

        } 
       }); 

    }); 
</script> 
<title>Message list</title> 
</head> 
<body> 

    <div id="pageData"></div> 
</body> 
</html>

출처

2013-02-28 Anonymous

불행히도 이것은 효과가 없을 것입니다.

jQuery Mobile은 제대로 작동하려면 미리 정의 된 페이지가 하나 이상 필요합니다.

트리거 ('생성') 또는 트리거 ('페이지 생성')를 사용하여 새 페이지 마크 업을 향상 시키더라도 적어도 하나의 정규 jQM 페이지가 없으면 해당 기능이 실패합니다.

그러나 대신 JQM 첫 번째 동적 페이지를 향상시키는의, 부정 행위를 할 수 당신이 직접 수행 http://jsfiddle.net/Gajotres/smsnP/

$(document).ready(function() { 
    $('<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>').appendTo("body"); 
});

출처

2013-02-28 20:14:56 Gajotres

예제가 작동하지만 아약스에서 데이터를 가져와야합니다. 그런 다음 페이지를 작성했습니다. 이 같은 기능을 사용하고 있다면 –

다른 질문에서 예제를 들었습니다. 또한 아약스 유무에 관계없이 여기서 중요한 문제는 아니며 적어도 하나 이상의 기존 페이지가 없으면 jQuery Mobile 페이지를 생성하고 스타일을 지정할 수 없습니다. 여기 나의 예제는 단지 일시적인 해결책 일 뿐이다. – Gajotres

페이지에이 일을 시도합니다.

출처

2013-02-28 10:49:30 JNDPNT

없음의 –

작동하지 $ (문서) .pagecreate() 바인딩 시도; 대신 (http://jquerymobile.com/demos/1.3.0-rc.1/docs/api/events.html). ready는 JQM에서 제대로 작동하지 않습니다. – JNDPNT

이 시도, 나를 위해 일하고 :
는 - 첫로드 데이터는 아약스와 함께 필요 ($ 아약스, $ .post ..)
-after 데이터가 수신 될 때, 부하 JQuery와 모바일 스크립트

나를 위해이 코드가 작동 :

012 3,

는 그 후, JQuery와 모바일 스타일은 나를 위해 apllied되지

출처

2013-03-14 10:25:45 Kinope

동적으로로드 된 내용보다 jQuery 모바일 스타일이 적용되지 않습니다.

답변

관련 문제