快捷導(dǎo)航

jQuery獲取動(dòng)態(tài)生成的元素示例

更新時(shí)間：2014年06月15日 11:21:02 投稿：whsnow

頁(yè)面上可以動(dòng)態(tài)添加數(shù)據(jù),比如table,點(diǎn)擊按鈕可以動(dòng)態(tài)添加行，下面與大家分享下jQuery如何獲取動(dòng)態(tài)生成的元素

需求描述：頁(yè)面上可以動(dòng)態(tài)添加數(shù)據(jù),比如table,點(diǎn)擊按鈕可以動(dòng)態(tài)添加行。又或頁(yè)面
加載時(shí)table數(shù)據(jù)是通過(guò)ajax從后臺(tái)獲取的。而這時(shí)我們想要獲取其中的某個(gè)值,又該如何獲取呢？

如果是要通過(guò)某個(gè)事件來(lái)獲取的比如click,mouseover等等,則可以使用live()方法

復(fù)制代碼代碼如下:

 
$(".button").live("click",function(){ 
console.info($("#mytd").html()); 
}) 

而如果不是通過(guò)某個(gè)事件,當(dāng)頁(yè)面加載的時(shí)候我們就要獲取值或進(jìn)行其他操作

live()方法就不行了,因?yàn)槲覀儫o(wú)法傳入一個(gè)事件。

比如以下代碼：

復(fù)制代碼代碼如下:

 
<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> 

以上代碼很簡(jiǎn)單,就是通過(guò)post從后臺(tái)返回的值添加到<table>中

后臺(tái)返回?cái)?shù)據(jù)為 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我們要在post之后獲取id為mytd的值,

此時(shí)是獲取不到的,我們從瀏覽器中就可以觀察出問(wèn)題：

從以上可以看出在alert的時(shí)候數(shù)據(jù)并還沒(méi)有加載出來(lái) 控制臺(tái)也并沒(méi)有打印出信息,所以此時(shí)是取不到數(shù)據(jù)的。

使用ajaxComplete()方法可以在請(qǐng)求完成時(shí)運(yùn)行要執(zhí)行的代碼,我們修改為如下：

復(fù)制代碼代碼如下:

 
$(function() { 
$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){ 
console.info(data.table); 
$("#tab").append(data.table); 
}) 
$("#tab").ajaxComplete(function(){ //待請(qǐng)求完成時(shí) 執(zhí)行 
alert($("#mytd").html()); 
}) 
}); 