jquery - 丢失布局属性，(可能)因为使用replaceWith()方法

Question

我正在尝试制作交互式内容。在此我计划使用 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() 中被调用，该函数是通过按下按钮触发的。它功能完美，正是我想要的，但它看起来不像我想要的......所以在功能上，没有问题。

希望您能明白问题所在!谢谢:)

Answer 1

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