jQuery 모바일 동적 콘텐츠 삽입

다음 코드에서 "테스트"li이 보이지 않는 이유를 알아내는 사람이 있습니까? 라이브 DOM을 검사하고 요소가 처리되는 것 같습니다 :jQuery 모바일 동적 콘텐츠 삽입

<!DOCTYPE HTML> 
<html> 
<head> 

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script> 
    $(document).ready(function(){ 
     $('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home").page(); 
     $.mobile.changePage("#home", {transition: "none"}); 
    }); 
    </script> 
</head> 

<body> 
<div id="home" data-role="page"> 
</div> 
</body> 
</html>

미리 감사드립니다.

출처

2011-12-26 Matrym

요소 아래 display 속성이 none로 설정하고 그 형제를 숨 깁니다했습니다

<div data-role="content" class="content ui-page ui-body-c ui-content" tabindex="0" role="main">

CSS 규칙 : 한을 가지고 있기 때문에

.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page { 
top: 0; 
left: 0; 
width: 100%; 
min-height: 100%; 
position: absolute; 
display: none; 
border: 0; 
}

출처

2011-12-26 09:33:26 Minras

올바른 jquery 모바일 메소드가 표시되는 것을 알고 있습니까? 나는 그것이 changePage가 transition none으로 할 것이라고 생각했다. – Matrym

나는 왜'test'의 조상을 검사하여'test'가 보이지 않는지 알아 보았고 그 중 하나 (적어도)는'display : none'을 발견했다. – Minras

가 changePage에 대한 호출이 작동하지 않습니다 기본적으로 표시/활성화되는 단일 페이지 create 이벤트를 트리거하여 활성 페이지를 강제로 업데이트 할 수 있습니다.

$('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home"); 
$.mobile.changePage("#home", {transition: "none"}); 
$.mobile.activePage.trigger('create');

출처

2011-12-26 09:54:23 nxt

jQuery 모바일 동적 콘텐츠 삽입

답변

관련 문제