jQuery获取动态生成的元素示例


Posted in Javascript onJune 15, 2014

需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行。又或页面
加载时table数据是通过ajax从后台获取的。而这时我们想要获取其中的某个值,又该如何获取呢?

如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法

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

而如果不是通过某个事件,当页面加载的时候我们就要获取值或进行其他操作

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

后台返回数据为 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我们要在post之后获取id为mytd的值,

此时是获取不到的,我们从浏览器中就可以观察出问题:
jQuery获取动态生成的元素示例 
从以上可以看出在alert的时候 数据并还没有加载出来 控制台也并没有打印出信息,所以此时是取不到数据的。

使用ajaxComplete()方法可以在请求完成时运行要执行的代码,我们修改为如下:

$(function() { 
$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){ 
console.info(data.table); 
$("#tab").append(data.table); 
}) 
$("#tab").ajaxComplete(function(){ //待请求完成时 执行 
alert($("#mytd").html()); 
}) 
});

jQuery获取动态生成的元素示例 
此时再获取的时候页面已加载完数据。
Javascript 相关文章推荐
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
Vue动态组件实例解析
Aug 20 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
手写实现JS中的new
Nov 07 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 #Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 #Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 #Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 #Javascript
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
main.php
2006/12/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
jQuery的学习步骤
2011/02/23 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python图像处理之反色实现方法
2015/05/30 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python中 map()函数的用法详解
2018/07/10 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
OpenCV 模板匹配
2019/07/10 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python运行异常管理解决方案
2020/03/09 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
2014村务公开实施方案
2014/02/25 职场文书
师恩难忘教学反思
2014/04/27 职场文书
团拜会策划方案
2014/06/07 职场文书
文案策划岗位职责
2015/02/11 职场文书
职工培训工作总结
2015/08/10 职场文书