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 相关文章推荐
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
Angular 容器部署的方法
Apr 17 Javascript
微信小程序实现授权登录
May 15 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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
SONY SRF-40W电路分析
2021/03/02 无线电
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
php a simple smtp class
2007/11/26 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
js实现自定义路由
2017/02/04 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
爱国主义教育活动总结
2014/05/07 职场文书
暑期工社会实践报告
2015/07/13 职场文书
react 路由Link配置详解
2021/11/11 Javascript
MySQL笔记 —SQL运算符
2022/01/18 MySQL
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB