JQuery - 動態添加Html後，如何使CSS生效，JS代碼可用？

今天在開發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