JQuery Mobile : 동적 Listview + 체크 박스가 처음 엉망으로 표시됩니다.

Question

다음 코드는 listview에 동적으로 확인란을 추가합니다. 첫 번째 디스플레이에서 그림 1과 같이 엉망인 형식을 보여줍니다. 동일한 코드를 호출하여 목록보기의 내용을 업데이트하는 새로 고침 단추를 클릭하면 그림 2와 같이 올바르게됩니다.

내가 놓친 분 어떤 것? 감사

PIC1 : http://postimage.org/image/6bvo8fpdd/ PIC2 : 페이지에 대한 기능을 "만드는"전화를 시도 목록보기 위해 "새로 고침"호출 후 http://postimage.org/image/gnyuokteb/

<div data-role="page" id="page2"> 


<div data-role="content" align="center">  
    <fieldset data-role="controlgroup" data-type="horizontal"><input type="radio" name="q1" id="checkall" value="checkall"/><label for="checkall">Check All</label><input type="radio" name="q1" id="uncheckall" value="uncheckall" checked="checked"/><label for="uncheckall">Uncheck All</label></fieldset> 
    <p> 
    <fieldset data-role="controlgroup" >                
    <ul id="mylist" data-role="listview" data-inset="true" data-theme="d" data-count-theme="b" data-filter="true" ">    

    </ul> 
    </fieldset> 
    </p>     
</div> 

function showCode(refresh){ 
var output =''; 
var iCounter = 0; 


$('#mylist').empty(); 

for (var i = 0; (i < g_Data.length && iCounter < 10); i+=2) { 
      iCounter += 1; 

      output += '<li><input type="checkbox" name="chk-'+iCounter + 'a" id="chx-'+iCounter +'a" class="custom" />'+ g_Data[i]+'<span class="ui-li-count">' + g_Data[i+1] + '</span></li>'; 

     } 

$('#mylist').append(output).listview('refresh');} 

Answer 1

. 이 같은

어떤 일이 : 당신의 JQuery와 요소 전에로드

// refresh list 
$('#mylist').append(output).listview('refresh'); 

// refresh page 
$('#page2').trigger('create');