Jqueryのモバイルとダイナミックリンク

Question

Jqueryモバイルに作業プロジェクトを浸漬するだけで、ちょっとした時間をかけて私の車輪を回転させてしまったというちょっとした障害に遭遇しました。

概念は次のとおりです。「最近のFacebookのエントリ」ボタンがあるメインページがあります。クリックすると、ボタンが2番目のページに移動し、結果はFacebookのRSSフィードから取得され、同じページのブックマークを指すタグでラップされます（JQM規則に従って）。これまでのところ私は問題はなく、リンクはタイトルを正確に入力しており、hrefは正しくhref = "detailpage" + iを指し示しています。問題は、対応するコンテンツコンテナを作成し、それをbodyタグに追加しようとしたときです。一致するdetailpage + i idを使用すると、リンクは新しく追加されたコンテンツではなくホームページに戻ります。

私の考えは、おそらくDOMは新しいものが作成された後にそこにあることを知りませんし、その結果、一致する要素がなく、最初の "ページ"要素が返されているだけです。

私はこのようになりますやっている操作のPhoneGap

で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

編集：私の車輪を回転させ、私のアプローチを変えた数時間後、私は解決策を見つけたようだ。最初に読み込んだ他のすべてのリンクのように、ブックマークの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()を動的に追加ページに呼び出される必要があるかもしれません。動的ページを追加するための

私のコードは次のようになります。

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

それは.page()を呼び出す場合があり得るだけで私は時間があるときチェックして、私の答えを更新しますdata-urlを追加します。