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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
js获取页面description的方法
May 21 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
vue模式history下在iis中配置流程
Apr 17 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
239军机修复记
2021/03/02 无线电
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
python操作CouchDB的方法
2014/10/08 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
妈妈活动方案
2014/08/15 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
工作年限证明模板
2015/06/15 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
导游词之介休绵山
2019/12/31 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL