最近在做一个通讯录，使用jquery mobile方式来做，在动态添加列表后，listview原有的样式失效，折腾一会，找出解决办法。代码如下。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>海大经管通讯录</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<ul data-role="listview" data-split-icon="arrow-r" id="userlist" data-filter="true" data-filter-placeholder="Search...">
</ul>
</div>
</div>
</body>
<script type="text/javascript"> $(function(){ getTeacherInfo(1,10); function getTeacherInfo(page,rows){ $.ajax({ url:url, type:'POST', async: false, success:function(data){ var str = ""; $.each(data.rows,function(n,value){ str += '<li><a href="tel:'+value.shouji.substring(0,11)+'">'+value.username+'<p class="ui-li-aside" id="shouji">'+value.shouji.substring(0,11)+'</p></a><a href="http://221.182.235.210/contact2/weixin/d.jsp?username='+value.username+'&shouji='+value.shouji.substring(0,11)+'&zhuzhai='+value.zhuzhai+'&bangong='+value.bangong+'&email='+value.email+'" id="go2detail"></a></li>'; }); // str += '<li><a href="#" id="get_more">加载更多</a></li>'; //追加html $("#userlist").append(str); //刷新listview,使之恢复样式 $("#userlist").listview("refresh"); //分页加载，提高用户体验 if(page<18){ getTeacherInfo(++page, rows); } } }); } /* $("li").click(function(){ var id = $(this).id; alert(id); }); */ }); </script>
</html>