1. 程式人生 > >jQuery獲取動態生成的元素

jQuery獲取動態生成的元素

fun ast tails 生成 console ron sni 獲取 data

需求描寫敘述:頁面上能夠動態加入數據,比方table,點擊按鈕能夠動態加入行。

又或頁面

載入時table數據是通過ajax從後臺獲取的。而這時我們想要獲取當中的某個值,又該怎樣獲取呢?

假設是要通過某個事件來獲取的比方click,mouseover等等,則能夠使用live()方法

$(".button").live("click",function(){  
     console.info($("#mytd").html());  
}) 
live()的具體說明參考http://blog.csdn.net/itmyhome1990/article/details/17380665

而假設不是通過某個事件,當頁面載入的時候我們就要獲取值或進行其它操作

live()方法就不行了,由於我們無法傳入一個事件。

比方下面代碼:

<body>
	<table id="tab" border="1" width="30%">
		
	</table>
</body>
<script type="text/javascript">
	$(function() {
	     $.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
		   console.info(data.table);
		   $("#tab").append(data.table);
	     })
		
	     alert($("#mytd").html());	//獲取值	
	});
</script>
以上代碼非常easy,就是通過post從後臺返回的值加入到<table>中

後臺返回數據為 <tr><td id=‘mytd‘>北京</td><td>深圳</td></tr>而我們要在post之後獲取id為mytd的值,

此時是獲取不到的,我們從瀏覽器中就能夠觀察出問題:

技術分享

從以上能夠看出在alert的時候 數據並還沒有載入出來 控制臺也並沒有打印出信息,所以此時是取不到數據的。


使用ajaxComplete()方法能夠在請求完畢時運行要運行的代碼,我們改動為例如以下:

$(function() {
	$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
		console.info(data.table);
		$("#tab").append(data.table);
	})
	$("#tab").ajaxComplete(function(){  //待請求完畢時 運行 
		alert($("#mytd").html());
	})
});
技術分享
此時再獲取的時候頁面已載入完數據。




jQuery獲取動態生成的元素