Jquery 모바일 및 동적 링크

Question

작업 프로젝트를 위해 일부 Jquery 모바일에 잠깐 들러서 나는 너무 오랫동안 내 바퀴를 돌리면서 약간의 걸림돌을 발견했습니다.

개념은 다음과 같습니다. "최근 Facebook 주소록"버튼이있는 기본 페이지가 있습니다. 클릭하면이 버튼을 통해 두 번째 페이지로 이동합니다. 여기서 두 번째 페이지는 페이스 북의 rss 피드에서 가져온 후 JQM 규칙에 따라 같은 페이지의 책갈피를 가리키는 태그로 감싸집니다. 지금까지는 문제가 없으며 링크가 제목을 올바르게 채우고 있으며 href가 올바르게 href = "detailpage"+ i를 가리키고 있습니다. 문제는 해당 컨텐트 컨테이너를 만들고 일치하는 detailpage + i id가있는 본문 태그에 추가하려고 할 때 링크가 새로 추가 된 컨텐트가 아니라 홈 페이지로 되돌아가는 것입니다.

제 생각에는 dom은 새로운 요소가 생성 된 후 해당 요소가없는 것을 알고, 일치하는 요소가 없으면 첫 번째 "page"요소 만 반환된다는 것입니다.

나는이 같은 모습을하고있는 중이 야 폰갭

작동을 JQM의 1.0b2 및 JQuery와 1.6.2을 사용하고 있습니다 : 여기

$('#gotoContentpage').click(function(){ 

    $("#contentlist").empty(); //empty the list elements we've placed in the html 
    $.ajax({ 
      type: "GET", 
      url: "https://www.facebook.com/feeds/page.php?id=212385708771580&format=rss20", 
      dataType: "xml", 
      success: parseXml 
      }); 

    function parseXml(xml){  
     var i =1; 
     $(xml).find("item").each(function(){ 
      var pageid = "detailpage" + i;      
      $("#contentlist").append("<li><a href='#"+pageid+"'>" + ($(this).find("title").text()) + "</a></li>"); 

      $("body").append("<div data-role='page' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1> detail Page Footer </h1></div></div>"); 

      i++; 
      }); 


      $("#contentlist").listview('refresh'); 

     } 


    });    

는 일반 HTML로 출력되고있는 HTML입니다 페이지 : http://deepblue.cs.camosun.bc.ca/~c0029098/caleb/test.html

EDIT : 내 바퀴를 돌리면서 내 접근 방식을 변경 한 후 해결책을 찾은 것 같습니다. 처음에로드되는 다른 모든 링크와 마찬가지로 책갈피에서 href 지점을 만드는 대신 $ .mobile.changePage 함수를 사용하여 내가 필요한 부분을 얻도록 강요 받았다.

"<li><a href='javascript:void(0)' onclick=\"javascript: $.mobile.changePage($('"+'#'+pageid+ "'), 'slide');\">" + "foobar"</a></li>" 

누군가를 돕는 희망.

Answer 1

동적으로 추가 된 페이지는 내비게이션에서 사용하려면 data-url 속성이 추가되어야한다고 생각합니다. 올바르게 기억한다면 JQM이 다시 버튼 및 기록 작업을 정밀 조사 할 때 추가되었습니다. ID는 더 이상 탐색 측면에서 사용되지 않습니다. 귀하의 경우

예 :

$("body").append("<div data-role='page' data-url='"+pageid+"' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1> detail Page Footer </h1></div></div>"); 

다음 .page()가 동적으로 추가 페이지에서 호출 할 수있는 문제가 여전히있는 경우. 그것은 .page()를 호출하는 경우가 있습니다

$('<div data-role="page" id="infopage" data-url="infopage"></div>').appendTo('body').page(); 

그냥 시간이 내 대답을 업데이트 할 때 나는 검사합니다 data-url 추가 : 같은 동적 페이지를 추가

내 코드 보인다.