sunylat

今天在开发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

分类:

技术点:

相关文章: