jquery动态添加列表后样式失效解决方式

最近在做一个通讯录,使用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>
posted @   江南一点雨  阅读(3358)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示