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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
通过js实现压缩图片上传功能
Feb 25 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
长波有什么东西
2021/03/01 无线电
PHP读取目录下所有文件的代码
2008/01/07 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python制作爬虫采集小说
2015/10/25 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python实现按长宽比缩放图片
2018/06/07 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
flask框架视图函数用法示例
2018/07/19 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
浅析PEP572: 海象运算符
2019/10/15 Python
编写python代码实现简单抽奖器
2020/10/20 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
给女朋友的道歉信
2014/01/10 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
安全生产计划书
2014/05/04 职场文书
个人自荐书范文
2015/03/09 职场文书
论文评审意见
2015/06/05 职场文书