• JQuery


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

  • 相关阅读:
    【 React
    vue : 无法加载文件 C:UsersXXXAppDataRoaming pmvue.ps1,因为在此系统上禁止运行脚本
    web前端工程化
    node.js读写文件
    gulp简单使用
    在window里面安装ubuntu子系统并安装图形化界面
    节点操作--JavaScript
    【jQuery中css(),attr()和prop区别】
    【animation和transtion】
    【网络状态反馈码】
  • 原文地址:https://www.cnblogs.com/sunylat/p/9734920.html
Copyright © 2020-2023  润新知