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>元素的内容来测试我的预感，看看它们是否保持初始化状态。

由于使用了replaceWith（）方法，丢失了布局属性（可能）

1 个答案: