我想使用Jquery Mobile在弹出窗口中动态显示列表视图。当我在listview中编写我想要的HTML代码时,它会以良好的css样式显示出来。但是当我使用Javascript生成listview内容时,css样式会被破坏,我不明白为什么。
这是我的问题的JSFiddle,左边是我想要获取的菜单,右边是我实际获得的菜单:http://jsfiddle.net/c0enm7yo/
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="content" id="content">
<div data-role="popup" id="menuIWant" data-theme="c" data-position-to="window" data-transition="slide">
<ul data-role='listview' data-inset='true' data-icon='delete' style='min-width:210px;' id="menuIWantDivider">
<li data-role='list-divider'>Menu I Want</li>
<li><a href='#'>View details</a></li>
<li><a href='#'>Edit</a></li>
<li><a href='#'>Disable</a></li>
<li><a href='#'>Delete</a></li>
</ul>
</div>
<div data-role="popup" id="menuIGet" data-theme="c" data-position-to="window" data-transition="slide">
<ul data-role='listview' data-inset='true' data-icon='delete' style='min-width:210px;' id="menuIGetDivider">
<li data-role='list-divider'>Menu I Get</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
<a href="#menuIWant" data-role="button" data-rel="popup" data-theme="c" id="menuIWantButton">Menu I want</a>
<a href="#menuIGet" data-role="button" data-rel="popup" data-theme="c" id="menuIGetButton">Menu I get</a>
</div>
</div>
</body>
$(document).on('click', '#menuIGetButton', function(event)
{
createDeleteProjectPopup();
});
function createDeleteProjectPopup()
{
$('<li>').append("<a href='#'>View details</a>").appendTo('#menuIGetDivider');
$('<li>').append("<a href='#'>Edit</a>").appendTo('#menuIGetDivider');
$('<li>').append("<a href='#'>Disable</a>").appendTo('#menuIGetDivider');
$('<li>').append("<a href='#'>Delete</a>").appendTo('#menuIGetDivider');
}