可能是我的 javascript 功能不够 :)。
我正在尝试将列表（通过 javascript 添加项目）动态增强到 jquery 移动面板。下面的代码是该功能的工作（非工作）示例。完整的项目会有点过多的开销（并且您需要一些串行连接的设备来运行它）。
它很好地向列表中添加了一个条目，但没有以正确的样式呈现它。
有没有我错过的技巧？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title> Device control</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<style>
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
function addEntry()
{
var div = $("<li><a href=\"#\">Device 2</a></li>").appendTo("#list_devices");
$( "#nav-panel-devicecommands" ).trigger( "updatelayout" );
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="pageDeviceCommands" class="ui-responsive-panel">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>Overview</h3>
<a href="#nav-panel-devicecommands" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="content" id="contentDeviceCommands">
empty for now
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#pageDeviceCommands" data-transition="fade" data-theme="" data-icon="home"></a></li>
</ul>
</div>
</div>
<style>
.nav-search .ui-btn-up-a {
background-image:none;
background-color:#333333;
}
.nav-search .ui-btn-inner {
border-top: 1px solid #888;
border-color: rgba(255, 255, 255, .1);
}
</style>
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal"
id="nav-panel-devicecommands" data-theme="a">
<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"
class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close device selection</a>
</li>
<li>
<a href="#">Device 1</a>
</li>
</ul>
<a data-role="button" onclick="addEntry();">add device</a>
<!-- panel content goes here -->
</div>
<!-- /panel -->
</div>
</body>
</html>
在webconsole中，很明显第一个入口的html代码，和那个按钮添加的不一样。有没有办法让 jquery mobile 将相同的信息集应用于新添加的 li 项目（除了“手动”添加）？
<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search ui-listview">
<li data-icon="delete" style="background-color:#111;" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" data-rel="close" class="ui-link-inherit">Close device selection</a>
</div><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Device 1</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li><a href="#">Device 2</a></li><li><a href="#">Device 2</a></li></ul>
非常感谢任何帮助或提示。
最好的问候，爱德华