最近在做一个通讯录,使用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>

jquery动态添加列表后样式失效解决方式的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?

    今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...

  3. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  5. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  6. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  7. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  8. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

随机推荐

  1. Hackerrank11 LCS Returns 枚举+LCS

    Given two strings,  a and , b find and print the total number of ways to insert a character at any p ...

  2. python学习笔记-(八)装饰器、生成器&amp;迭代器

    本节课程内容概览: 1.装饰器 2.列表生成式&迭代器&生成器 3.json&pickle数据序列化 1. 装饰器 1.1 定义: 本质上是个函数,功能是装饰其他函数—就是为其 ...

  3. 系统隐式 Intent

    1. 找出系统中所有视频 private void choiceFile() { Intent intent = new Intent(Intent.ACTION_PICK, android.prov ...

  4. 改变Chrome浏览器主程序_缓存_个人信息路径

      改变Chrome浏览器缓存_个人信息路径(亲测) actionx2上传于2012-10-26|(7人评价)|3077人阅读|41次下载|文档简介|举报文档    在手机打开   改变 Chrom ...

  5. log4jdbc-remix安装配置

    1.maven安装依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...

  6. rgba兼容IE系列

    在容器里面如果用到opacity或者filter:opacity里面的内容也会被滤镜化 如果不想里面的内容也被滤镜化我们可以用rgba来处理或者用透明的背景图片. 兼容ie的rgba的写法 backg ...

  7. hadoop2.2编程:DFS API 操作

    1. Reading data from a hadoop URL 说明:想要让java从hadoop的dfs里读取数据,则java 必须能够识别hadoop hdfs URL schema, 因此我 ...

  8. SICP 解题集 — SICP 解题集

    SICP 解题集 — SICP 解题集 SICP 解题集¶ 这个文档的目标是成为中文化的.完整的<计算机程序的构造和解释>一书的解题集. 这个解题集的特色是: 对于每道习题,除了习题答案之 ...

  9. Spring+SpringMVC+MyBatis深入学习及搭建(四)——MyBatis输入映射与输出映射

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6878529.html 前面有讲到Spring+SpringMVC+MyBatis深入学习及搭建(三)——My ...

  10. Oracle undo 表空间不可用

    由于某次不小心操作,在切换表空间时没有成功,由于把undo的配置参数 undo_management值设置为MANUAL所以在启动数据库时没有报任何错误,但是给表插入数据时报错了,回滚段不可用的错误. ...