2013-03-01 3 views
0

jquery mobile은 모든 요소가 내 DB 결과에서 생성 될 때까지 대기 할 수 있습니까?JQM은 모든 요소가 생성 될 때까지 대기합니다

1 - 한 click() 화재의 $.mobile.changePage("somePage.html");

2 - 나는 database

3에서 내 물건을 장착 시작하는 $("body").on("pageinit", "#id-from-page", function(){ loadMyStuffs(); })을했다 - loadMyStuffs();db result에서 append();를 사용하여 몇 가지 요소를 만들 수 있습니다.

기본적으로이 세 단계에서 작동하지만 문제는 요소가 만들어지기 전에 페이지가 표시된다는 것입니다.

그럼 4 stepshowpagenow과 같이 만들려면 어떻게해야합니까? 이 같은

루프는 뭔가 :

for(var i = 1; i <= imgNum; i++){ 
    // stats from step 

    var imageList = "<li class='img-steps'>"+ 
         "<img class='view-step' src='"+ base_url + "/" + data.result[i].IMGPAT + data.result[i].IMGNAM + "'/>"+ 
        "</li>"; 

    // append to ul list image 
    $(".img-ul").append(imageList); 
} 

어떤 조언, 내 손님합니다.

답변

1

이벤트 처리기는 현재 선택한 요소에만 바인딩되며 코드가 .on()을 호출 할 때 페이지에 있어야합니다. 문서 요소는 다른 HTML을로드하기 전에 문서 머리글에서 사용할 수 있으므로 문서가 준비 될 때까지 기다리지 않고도 이벤트를 첨부 할 수 있습니다.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Cars example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script> 
      $(document).on("pageinit", "#car-details-page", function(e) { 
       var listItems = ''; 
       for (var i=0; i<50; i++) { 
        listItems += ["<li><a href=\"#\" id=\"acura\">Acura_",i,"</a></li>"].join(""); 
       } 
       $("#car-list").append(listItems).listview("refresh"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="car-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car list</a></h1> 
      </div> 
      <div data-role="content"> 
       <a href="#car-details-page">Go to Page 2</a> 
      </div> 
     </div> 
     <div id="car-details-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car details</a></h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <ul data-role="listview" id="car-list"> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html> 

난이 도움이되기를 바랍니다 :

봅니다 $(document).on("pageinit", "#id-of-page", function()

당신은 아래의 예를 확인할 수 있습니다 사용할 수 있습니다.

관련 문제