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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
vue实现信息管理系统
May 30 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php实现学生管理系统
2020/03/21 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JS动画效果代码3
2008/04/03 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python实现归并排序算法
2018/11/22 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
学习雷锋标语
2014/06/25 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
《日月潭》教学反思
2016/02/20 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Go语言编译原理之源码调试
2022/08/05 Golang
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL