1. 程式人生 > >Jquery 獲取Ajax動態加載出的頁面元素

Jquery 獲取Ajax動態加載出的頁面元素

需求:

        1 通過頁面初始化函式${function(){}}函式呼叫ajax訪問後臺,得到資料節點

        2 通過ajax得到渲染出的資料不新增事件

        3 完成checkbox預設選中

$(function(){
	
	$.ajax({
		type: 'get',
		contentType:'application/json;charset=utf-8',
		dataType:'json',
		url: '${pageContext.request.contextPath}/author/list.do',//請求後臺資料介面
		success: function(res) {
			if (res!=null) {
				$("#tt").empty(); //拼接字串完成ckeckbox列表的載入
            	for(var i=0;i<res.length;i++){ 
            		var item =res[i];
            		var message ="";
            		message += "<dl class='permission-list'>";
            		message += " <dt>";
			message += "<label>";
			message += "<input type='checkbox' value='"+item.authorId+"' name='authorId' id='user-Character-1'>"
			message += item.authorName+"</label>";	
			message += "</dt> ";		
			message += "<dd>";		
			message += "<dl class='cl permission-list2'>";
			message += "<dd>";
			if(item.authorSet!=null && item.authorSet.length>0){			
			for(var j=0;j<item.authorSet.length;j++){
				var ctem  = item.authorSet[j];
				message += "<label class=''>";
				message += "<input type='checkbox' value='"+ctem.authorId+"' name='authorId' id='user-Character-1-0-0'>";
				message += ctem.authorName+"</label>";
			}						
			}
			message +="</dd>";	
			message +="</dl>";
			message += "</dd>";
			message +="	</dl>";				
    			$("#tt").append(message);
            	}
       }
},
	complete:function(){  // 通過complete函式
		var cks =$("input[name='authorId']"); // 獲取剛才加載出的所有checkbox集合
		var authors =${sessionScope.authorIds} // 獲取後臺資料的角色id集合
		console.log(authors);
		for(var i=0;i<cks.length;i++){
		for (var j=0;j<authors.length;j++){
			var id = authors[j];
				if(cks[i].value == id){
				cks[i].checked= true; //設定預設選中 break;
				}
			}
		} 
	}
});
});