jquery - 丢失布局属性(可能是由于使用replaceWith()方法)

我正在尝试制作交互式内容。在此，我计划使用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>'
);

实际上，首先完成了底部。在另一个函数refresh（）中调用viewNews（）函数，该函数通过按下按钮来触发。它功能完美，正是我想要的，但看起来却不像我想要的...因此在功能上没有问题。

希望你看到了什么问题！谢谢 ：）

最佳答案

我只需要替换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>元素的内容以查看它们是否保持初始化的方式来测试我的直觉。