JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?
今天在开发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代码可用?的更多相关文章
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
随机推荐
- NABCD模型--软件工程
1.N (Need 需求) 我们通过网络调查问卷的方式,收集样本数据,并对其进行分析和总结. 1.你是否为在校学生? 7.如果用过,你觉得还应该需要添加什么功能 通过调查发现,大多数学生并不是特别了解 ...
- KMP(2)
KMP 算法(2):其细微之处 2017 年 05 月 13 日 • 技术 系列文章目录 KMP 算法(1):如何理解 KMP KMP 算法(2):其细微之处 本篇来谈一谈 KMP 的一些细微之处,直 ...
- Luugu 3084 [USACO13OPEN]照片Photo
很神仙的dp...假装自己看懂了,以后回来复习复习... 设$f_{i}$表示从$1$到$i$,且$i$这个点必放的最大数量. 一个区间有两个限制条件:至少放一个,至多放一个. 因为一个区间至多要放一 ...
- 21个ui设计技巧,让你的设计不落伍
1.功能性极简主义 不少移动端APP和网站开始基于极简主义设计风来设计,而极简主义本身并非关注所有的信息,而是通过减少非关键信息来突出特定的内容,它是有着极强的功能性和偏向的.它有着如下的特征: ・简 ...
- Windows系统文件mshtml.dll
今天,在vista 32bit,sp 2,IE7的机器上跑开发的软件产品,打开IE,被测系统总是崩溃,换了一台机器,同样的配置环境,却没有重现. 同事的分析很详细,学习了 I tried this c ...
- Bootstrap验证
<div class="modal fade" id="myModal" tabindex="-1" role="dialo ...
- mybatis 传参为 Integer 时 ,Mapper 文件 中判断 条件 问题。
<if test="valiStatus==null || valiStatus=='' || valiStatus==4 "> b.work_permit_card_ ...
- jquery插件解读之tabs
先上代码,符简略关键性说明: /** * jQuery EasyUI 1.4.1 * * Copyright (c) 2009-2014 www.jeasyui.com. All rights re ...
- 2018.09.02 Atcoder Regular Contest 102简要题解
比赛传送门 T1 Triangular Relationship 分析之后发现有两种情况: 1. n为奇数,那么所有数都是k的倍数. 2. n为偶数,那么所有数都是k/2的倍数. 然后就可以愉快A题了 ...
- Django入门与实践 1-16章总结
注意事项:随时备份.随时记录.从宏观到微观 不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之:学至于行之止矣 安装 Python 3.6.2 pip install django==1.11.4 ...