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插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
使用node.js搭建服务器
May 20 Javascript
浅析vue深复制
Jan 29 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 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
谈谈PHP的输入输出流
2007/02/14 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python 探针的实现原理
2016/04/23 Python
python getopt详解及简单实例
2016/12/30 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
如何对python的字典进行排序
2020/06/19 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
介绍Ibatis的核心类
2013/11/18 面试题
主持人婚宴答谢词
2014/01/28 职场文书
网络营销计划书
2015/01/17 职场文书
房产公证书样本
2015/01/23 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL