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

一,使动态加载数据对应的CSS生效。

  //刷新Listview,使CSS生效
$("#控件ID").listview("refresh");

在加载完数据代码之后,加入上面代码,把“控件ID”换成你的真正的Listview控件ID就可以了!其它控件暂时没有尝试,但是Listview肯定可以的!!

下面是我的动态添加数据和使对应CSS生效完整代码:

                     var dataArr = responseObject.obj;

                     if (dataArr.length > 0) {

                         var tempHtml = "";

                         for (var i = 0; i < dataArr.length; i++) {
tempHtml += '<li>';
tempHtml += '<a href="#" class="notice-data" id="' + i + '" onclick="GoDetailPage(this.id)">';
tempHtml += '<img src="../../img/u167.png" style="margin-left:5px;margin-top: 18px">';
tempHtml += '<h2 style="margin-left: -35px">' + dataArr[i].title + '</h2>';
tempHtml += '<p style="margin-left: -35px">' + dataArr[i].depart + '</p>';
tempHtml += '<p style="margin-left: 75%;margin-top:-35px">' + dataArr[i].date + '</p>';
tempHtml += '</a>';
tempHtml += '</li>';
} //更新Listview中的html内容
$("#notice-data-list").html(tempHtml); //刷新Listview,使CSS生效
$("#notice-data-list").listview("refresh"); }

二,如何使动态添加数据对应的JS生效

我的需求可能比较简单,就是点击事件,在这个事件里面处理一些事物。看上面的第9行代码,里面有一个JS事件“onclick”,这样使用最原始的JS代码就可以了!下面是对应的函数代码:

       //访问详细信息页面
function GoDetailPage(id) { alert(id); $.mobile.changePage("noticeDetail.html");
}

上述代码均测试过,可以正常工作!可能我的解决办法不够好,如果您有更好办法,希望您能告诉我,谢谢!sunylat@163.com

参考:

https://blog.csdn.net/u012702547/article/details/45130615

JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?的更多相关文章

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

    最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  9. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

随机推荐

  1. ubuntu 设置静态ip地址不生效问题

    出现了一个问题是,配置了静态ip地址之后,重启网络服务,查看ip地址是生效的,过会再看就 不生效了,查看网上说是由于 network-manager 管理ip地址时候出现的冲突,将network-ma ...

  2. 16款值得一用的iPhone线框图模板 (PSD & Sketch)

    在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计和开发的人员更好的理解设计师的思路和设计的功能点. 即使线框图设计是一个比较耗时的 ...

  3. 【Linux】Jenkins配置和使用(二)

    摘要 本章介绍Jenkins的简单使用,关于Jenkins的安装,参照[Linux]Jenkins安装(一) 事例说明:在linux环境下,安装的jenkins,集成svn,tomcat的环境,项目是 ...

  4. 2018.09.27 bzoj3029: 守卫者的挑战(概率dp)

    传送门 概率dp经典题目. 直接f[i][j][k]f[i][j][k]f[i][j][k]表示当前是第i次挑战,已经胜利了j次,目前的背包剩余空间是k. 然后用前面的转移后面的就行了. 注意第三维可 ...

  5. 2018.09.08 bzoj1151: [CTSC2007]动物园zoo(状压dp)

    传送门 状压dp好题啊. 可以发现这道题的状压只用压缩5位. f[i][j]表示当前在第i个位置状态为j的最优值. 显然可以由f[i-1]更新过来. 因此只用预处理在第i个位置状态为j时有多少个小朋友 ...

  6. linux中nfs启动报rpcbind.socket failed to listen on sockets: Address family not supported by protocol

    1.systemctl start rpcbind.service 报错: [root@autodeploy ~]# journalctl -xe -- Support: http://lists.f ...

  7. shell中$(( ))、$( )与${ }的区别

    转载自:http://blog.sina.com.cn/s/blog_4da051a60102uwda.html 命令替换 在bash中,$( )与` `(反引号)都是用来作命令替换的. 命令替换与变 ...

  8. Redis为什么是单线程

    转自:https://www.zhihu.com/question/23162208 https://www.zhihu.com/question/55818031:加了一些个人的理解. Redis为 ...

  9. (KMP)Seek the Name, Seek the Fame -- poj --2752

    http://poj.org/problem?id=2752 Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536 ...

  10. HDU 1166敌兵布阵 2016-09-14 18:58 89人阅读 评论(0) 收藏

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...