2

インタラクティブなコンテンツを作ろうとしています。これには、replaceWith() メソッドを使用する予定です。すべてが jQueryMobile で作成されているため、既定のレイアウトが既に用意されています。問題は、replaceWith() メソッドを使用したときに、これらのレイアウト プロパティが呼び出されていないように見えることです。

私が間違っていることを知りたいです。

コード：

   function viewNews(){
    $('#newsPage').replaceWith('<div data-role="content" id="newsPage"><ul data-role="listview" data-filter="true" id="articleList"><li></li></ul></div>');

    for(var i = 2; i<=maxLength; i++) {
        $('#articleList li:last').after('<li id="list' + i + '"><a style="font-size: x-small" href="#article' + i + '">'+ storedTitles[i] +'</a></li>');
enter code here}
}



//======= NEWS OVERVIEW PAGE ========
document.write(
  ' <div data-role="page" id="news">' +
  '     <div data-role="header" data-position="fixed">' +
  "         <h1>What's on Xiamen</h1>" +
  '         <a data-role="button" data-icon="refresh" class="ui-btn-right" data-iconpos="notext" onClick="refresh()">Refresh</a>' +
  '     </div>' +
  '     <div data-role="content" id="newsPage">' +
  '         <ul data-role="listview" data-filter="true" id="articleList">'
);
for(var i=1; i<=maxLength; i++){
 document.write(
  '             <li id="list' + i + '"><a style="font-size: x-small" href="#article' + i + '">'+ storedTitles[i] +'</a></li>'
  );
}
document.write(
  '         </ul>' +
  '     </div>' +
  '     <div data-role="footer" data-id="foo1" data-position="fixed">' +
  '     <div data-role="navbar">' +
  '      <ul>' +
  '         <li><a href="#news" data-back="true" class="ui-btn-active ui-state-persist">News</a></li>' +
  '         <li><a href="#profile" >Profile</a></li>' +
  '         <li><a href="#friends" >Friends</a></li>' +
  '         <li><a href="#settings" >Settings</a></li>' +
  '      </ul>' +
  '     </div>' +
  '     </div>' + 
  ' </div>'
);

実際には、下の部分が最初に行われます。viewNews() 関数は、ボタンを押すことによってトリガーされる別の関数 refresh() で呼び出されています。それは完璧に機能し、まさに私が望んでいたものですが、私が望んでいるようには見えません...したがって、機能的には問題ありません。

何が問題なのか見てください！ありがとう ：）

4

1 に答える 1

0

タグ内のhtmlを置き換えるだけdivです（そうしないと、循環しているように見えます）：

$('#newsPage').html('<ul data-role="listview" data-filter="true" id="articleList"><li></li></ul>').trigger( 'updatelayout' );

編集：追加してみてくださいtrigger('updatelayout')。あなたの問題から、Jquery Mobile はdata-xxxxリビジョン内の属性をリッスンしていないようです。

うまく機能する場合は、要素 trigger('updatelayout')のコンテンツを個別に更新して、初期化された状態のままかどうかを確認することで、私の予感をテストできます。<li>

于 2012-10-30T20:52:59.267 に答える