分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:16责任编辑:傅花花关键词:CSS

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

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

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

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

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

 1 ????????????????????var dataArr = responseObject.obj; 2 ?3 ????????????????????if (dataArr.length > 0) { 4 ?5 ????????????????????????var tempHtml = ""; 6 ?7 ????????????????????????for (var i = 0; i < dataArr.length; i++) { 8 ????????????????????????????tempHtml += ‘<li>‘; 9 ????????????????????????????tempHtml += ‘<a href="#" class="notice-data" id="‘ + i + ‘" onclick="GoDetailPage(this.id)">‘;10 ????????????????????????????tempHtml += ‘<img src="../../img/u167.png" style="margin-left:5px;margin-top: 18px">‘;11 ????????????????????????????tempHtml += ‘<h2 style="margin-left: -35px">‘ + dataArr[i].title + ‘</h2>‘;12 ????????????????????????????tempHtml += ‘<p style="margin-left: -35px">‘ + dataArr[i].depart + ‘</p>‘;13 ????????????????????????????tempHtml += ‘<p style="margin-left: 75%;margin-top:-35px">‘ + dataArr[i].date + ‘</p>‘;14 ????????????????????????????tempHtml += ‘</a>‘;15 ????????????????????????????tempHtml += ‘</li>‘;16 ????????????????????????}17 18 ????????????????????????//更新Listview中的html内容19 ????????????????????????$("#notice-data-list").html(tempHtml);20 21 ????????????????????????//刷新Listview,使CSS生效22 ????????????????????????$("#notice-data-list").listview("refresh");23 24 ????????????????????}

二,如何使动态添加数据对应的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代码可用?

原文地址:https://www.cnblogs.com/sunylat/p/9734920.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved