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 列表双向选择器之改进版
Aug 09 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
详解vue 组件注册
Nov 20 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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来自动调用不同服务器上的flash
2006/10/09 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
用javascript实现画板的代码
2007/09/05 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
介绍Python中的文档测试模块
2015/04/28 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
基于python 字符编码的理解
2017/09/02 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
使用Python封装excel操作指南
2021/01/29 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
高中打架检讨书
2014/02/13 职场文书
业务员自荐信范文
2014/04/20 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
学风建设演讲稿
2014/09/12 职场文书
初中教师个人工作总结
2015/02/10 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS