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

我只是替换div标签内的html（否则它看起来是圆形的）：

$('#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 回答