jQuery Mobile에서 페이지를 변경하면 이상한 서식 문제가 발생합니다.

Question

동적으로 채우는 여러 개의 목록보기로 구성된 단일 페이지 jQuery 모바일 응용 프로그램이 있습니다. 처음 페이지를 방문 할 때마다 제대로로드되고 모든 서식이 멋지게 나옵니다. 그러나 다른 페이지로 이동 한 다음 페이지로 돌아 가면 페이지에 '밀어 넣기'가 약 50 % 씩 상향 조정됩니다. 내가 대신 (페이지() 호출을 야기해서는 안) 뒤로 버튼을 누르는

<a href="#mypagewithlist">something</a> 

같은 것을 유사한 링크를 클릭 할 때

이 문제가 발생합니다.

<div data-role="page" id="pagewithlist"> 
    <div data-role="content"> 
     <ul data-role="listview" id="mylistview"> </ul> 
     <!-- I use jQuery Templates to populate the above list --> 
    </div> 
</div> 
<div data-role="page" id="pagewithlink"> 
    <div data-role="content"> 
     <a data-role="button" href="#pagewithlist">Go to page with list</a> 
    </div> 
</div> 

내가 API에서 데이터를 끌어 페이지의 첫 번째로드에서

다음 데이터가 jQuery로 빈 목록을 채우는 것을 사용 여기

는 페이지의 일부가 될 것입니다 무슨의 예입니다 템플릿.

이 문제를 해결하는 방법에 대한 아이디어가 있으십니까?

Answer 1

원본 페이지 (링크를 사용하여 돌아 오는 페이지)의 데이터 URL은 무엇입니까? 해당 페이지 (div)에 ID를 할당하고 링크를 <a href="#mypagewithlist">something</a>으로 변경 했습니까? 링크와 페이지의 data-url이 일치하지 않으면 jQM은 원래 페이지를 다시 가져오고 DOM에 두 번로드되므로 문제가 발생할 수 있습니다.

Answer 2

페이지로 돌아 가면 목록을 업데이트 해 보셨습니까? 즉 :

$('ul').listview('refresh');