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 相关文章推荐
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
Angular4 反向代理Details实践
May 30 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
js实现点击烟花特效
2020/10/14 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
质量保证书格式
2015/02/27 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
MYSQL如何查看进程和kill进程
2022/03/13 MySQL