2011-12-02 3 views
1

data-scroll="true" 페이지가 고정 페이지 인 경우 제대로 작동하지만 자바 스크립트를 사용하여 페이지를 동적으로 추가하면 작동하지 않습니다.동적으로 삽입 된 페이지에서 jQueryMobile 'data-scroll = true'가 작동하지 않습니다.

내 헤더 섹션은 다음과 같습니다

<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" /> 
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script> 
<script type="text/javascript" src="js/scrollview.js"></script> 

나는 또한 data-scroll 속성을 추가하고 자바 스크립트를 사용하여 true로 설정, 아래에있는 내 코드입니다 :

var pageHtml = "<div data-role='page' data-scroll='true' id=page" + pageId + " data-url=page" + pageId + ">"; 
var pageHeader = "<div data-role='header' data-position='fixed'><h1>" + menuItem + "</h1></div>"; 
var pageContent = "<div data-role='content' id='page" + pageId + "Content'></div>"; 
var page = pageHtml + pageHeader + pageContent + "</div>"; 
$(page).appendTo($.mobile.pageContainer); 

이 제발 도와주세요 ...

+0

게시 한 항목보기 jQM은 아직 jQuery 1.7.x를 지원하지 않습니다. 1.6.4를 사용해야합니다. jQM 1.0으로 업그레이드해야 데모 (예 : http : // jsfiddle)로 연결됩니다.net) –

답변

0

해당 페이지를 JQM에 적용해야합니다. 시도해보십시오.

$(page).appendTo($.mobile.pageContainer).page(); 

또는

$(page).appendTo($.mobile.pageContainer).trigger('create'); 

희망이

UPDATE하는 데 도움이 :

$('yourScrollersId').scrollview(); 

I가 있었다 : 여기에 공식적으로

+0

@ Leon ... 발생 했는데도 오류가 발생했을 때 도움이 될 것입니다. 시도했지만 여전히 작동하지 않습니다. –

1

이런 식으로 뭔가를 시도하는 방법에 JQM documentation입니다 같은 문제가 나를 위해 일했다.

더 나은 나중에 나는 우리가 고유의 컨테이너들로, 각각의 스크롤 블록, 동적 HTML을로드 할 필요

은 -을 발견 한 것은 오랜 연구 후

+1

nope. 작동하지 않음 –

+0

나를 위해 일하지 않는다 : S –

1

, :-) 결코보다.

다음

$('#scrollContainer').html(loadHtml); 
$("#scrollContainer").scrollview(); 
$("#scrollContainer").trigger('create'); 

다음 eg.-

HTML

<div data-role="content" id="container"> 

    <div id="scrollContainer"></div> 

    <div id="anotherContainer"></div> 

</div> 

JS

우리가 처음에 'scrollContainer'에있는 ScrollView를로드하는 경우에 티 나, 우리는 우리가 <div>을 다시 &을 제거 할 수 있습니다 다시 동적 #scrollContainer에로드

$('#anotherContainer').html(loadHtml); 
$("#anotherContainer").scrollview(); 
$("#anotherContainer").trigger('create'); 

옵션 다른 컨테이너 -에로드해야합니다. 두 번째 코드 블록을

$('#scrollContainer').remove(); 
$('#container').append('<div id="scrollContainer"></div>'); 
//$('#scrollContainer').empty(); // simply making this DIV empty WILL NOT WORK, we need to REMOVE DYNAMIC CLASSES, STYLES also. So, its better to recreate the LOADCONTAINER 

다른 솔루션을 실행 한 후이있을 수 있지만,이 사람은 정말 작동합니다.

관련 문제