jQuery獲取動態(tài)生成的元素示例
更新時間:2014年06月15日 11:21:02 投稿:whsnow
頁面上可以動態(tài)添加數(shù)據(jù),比如table,點擊按鈕可以動態(tài)添加行,下面與大家分享下jQuery如何獲取動態(tài)生成的元素
需求描述:頁面上可以動態(tài)添加數(shù)據(jù),比如table,點擊按鈕可以動態(tài)添加行。又或頁面
加載時table數(shù)據(jù)是通過ajax從后臺獲取的。而這時我們想要獲取其中的某個值,又該如何獲取呢?
如果是要通過某個事件來獲取的比如click,mouseover等等,則可以使用live()方法
$(".button").live("click",function(){
console.info($("#mytd").html());
})
而如果不是通過某個事件,當(dāng)頁面加載的時候我們就要獲取值或進(jìn)行其他操作
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>
以上代碼很簡單,就是通過post從后臺返回的值添加到<table>中
后臺返回數(shù)據(jù)為 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我們要在post之后獲取id為mytd的值,
此時是獲取不到的,我們從瀏覽器中就可以觀察出問題:
從以上可以看出在alert的時候 數(shù)據(jù)并還沒有加載出來 控制臺也并沒有打印出信息,所以此時是取不到數(shù)據(jù)的。
使用ajaxComplete()方法可以在請求完成時運行要執(zhí)行的代碼,我們修改為如下:
$(function() {
$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
console.info(data.table);
$("#tab").append(data.table);
})
$("#tab").ajaxComplete(function(){ //待請求完成時 執(zhí)行
alert($("#mytd").html());
})
});
此時再獲取的時候頁面已加載完數(shù)據(jù)。
加載時table數(shù)據(jù)是通過ajax從后臺獲取的。而這時我們想要獲取其中的某個值,又該如何獲取呢?
如果是要通過某個事件來獲取的比如click,mouseover等等,則可以使用live()方法
復(fù)制代碼 代碼如下:
$(".button").live("click",function(){
console.info($("#mytd").html());
})
而如果不是通過某個事件,當(dāng)頁面加載的時候我們就要獲取值或進(jìn)行其他操作
live()方法就不行了,因為我們無法傳入一個事件。
比如以下代碼:
復(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>
以上代碼很簡單,就是通過post從后臺返回的值添加到<table>中
后臺返回數(shù)據(jù)為 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我們要在post之后獲取id為mytd的值,
此時是獲取不到的,我們從瀏覽器中就可以觀察出問題:

從以上可以看出在alert的時候 數(shù)據(jù)并還沒有加載出來 控制臺也并沒有打印出信息,所以此時是取不到數(shù)據(jù)的。
使用ajaxComplete()方法可以在請求完成時運行要執(zhí)行的代碼,我們修改為如下:
復(fù)制代碼 代碼如下:
$(function() {
$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
console.info(data.table);
$("#tab").append(data.table);
})
$("#tab").ajaxComplete(function(){ //待請求完成時 執(zhí)行
alert($("#mytd").html());
})
});

此時再獲取的時候頁面已加載完數(shù)據(jù)。
相關(guān)文章
jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能
這篇文章主要介紹了jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能,需要的朋友可以參考下2017-10-10jquery tablesorter.js 支持中文表格排序改進(jìn)
之前研究過一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強做了一個用著。后面發(fā)現(xiàn)當(dāng)動態(tài)給單元格加超鏈接,或者列中存在一些空白,就排序不了了。2009-12-12Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹
初識Jquery EasyUI看了一些博主用其開發(fā)出來的項目,頁面很炫,感覺功能挺強大,效果也挺不錯,最近一直想系統(tǒng)學(xué)習(xí)一套前臺控件,于是在網(wǎng)上找了一些參考示例2013-10-10分享精心挑選的12款優(yōu)秀jQuery Ajax分頁插件和教程
在這篇文章中,我為大家收集了12個基于 jQuery 框架的 Ajax 分頁插件,這些插件都提供了詳細(xì)的使用教程和演示2012-08-08