最近在做一个通讯录，使用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. Spring AOP实现方式四之注入式AspectJ切面【附源码】

    现在我们要讲的是第四种AOP实现之注入式AspectJ切面 通过简单的配置就可以实现AOP了. 源码结构: 1.首先我们新建一个接口,love 谈恋爱接口. package com.spring.ao ...

  2. .NET之特性和属性

    1. 引言 attribute是.NET框架引入的有一技术亮点,因此我们有必要花点时间走进一个发现attribute登堂入室的入口.因为.NET Framework中使用了大量的定制特性来完成代码约定 ...

  3. 搭建Git本地服务器

    搭建Git本地服务器 参考文章:http://www.ossxp.com/doc/git/gitolite.html 当前任务,学习中... 公司小范围用法: 服务器上做的: .在服务器上建立一个用户 ...

  4. JAVA web选型

    Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置到该容器中,才能使网络中的所有用户通过浏览器进行访问.开发Java Web应用所采用的服务器主要是与JSP/Servlet兼容的We ...

  5. [转] KMP算法详解

    转载自:http://www.matrix67.com/blog/archives/115 KMP算法详解 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段.    我们这里说的K ...

  6. NuGet -- 使用控制台管理程序包

    为什么要使用控制台管理程序包而不使用程序包管理窗口?原因大家都懂,生活压力这么大,一切都只是为了装一波.开个玩笑,当然不只是此原因,在有些情况下,有些操作使用程序包管理窗口不能达到目的,只能使用控制台 ...

  7. Android 实用代码七段（三）

    前言 终于又攒了一篇出来,本系列以实用为主,欢迎和我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http: ...

  8. 从Spring HibernateTemplate模板方法设计模式的实现谈起

    概述 模板方法模式是GOF设计模式中很典型的设计模式,其意图是由抽象父类控制顶级逻辑,并把基本操作的实现推迟到子类去实现,这是通过继承的手段来达到对象的复用.Spring模板方法模式实际是模板方法模式 ...

  9. hive的安装步骤

    在node2里安装一下hive1.2.1,步骤如下: 1.解压hive的安装包 2.改变目录:mv apache-hive-1.2.1-bin /home/install/hive-1.2 3.vi ...

  10. 洛谷P1118 数字三角形游戏

    洛谷1118 数字三角形游戏 题目描述 有这么一个游戏: 写出一个1-N的排列a[i],然后每次将相邻两个数相加,构成新的序列,再对新序列进行这样的操作,显然每次构成的序列都比上一次的序列长度少1,直 ...