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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
什么是SOLID
Mar 24 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 mkdir()定义和用法
2009/01/14 PHP
PHP 七大优势分析
2009/06/23 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
django初始化数据库的实例
2018/05/27 Python
Django对models里的objects的使用详解
2019/08/17 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
初三物理教学反思
2014/01/21 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年社区工作总结
2014/11/18 职场文书
关于召开会议的通知
2015/04/15 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Nginx配置https的实现
2021/11/27 Servers