1. 程式人生 > >JQuery - 動態添加Html後,如何使CSS生效,JS代碼可用?

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

+= ref 但是 希望 今天 .net view 函數代碼 點擊

今天在開發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");
        }

上述代碼均測試過,可以正常工作!可能我的解決辦法不夠好,如果您有更好辦法,希望您能告訴我,謝謝![email protected]

參考:

https://blog.csdn.net/u012702547/article/details/45130615

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