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 相关文章推荐
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
详解JS函数重载
Dec 04 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
ESLint 是如何检查 .vue 文件的
Nov 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
web 页面分页打印的实现
2009/06/22 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python实现通讯录功能
2018/02/22 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python清空命令行方式
2020/01/13 Python
Python如何实现FTP功能
2020/05/28 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
is_file和file_exists效率比较
2021/03/14 PHP
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
会计专业自我评价
2014/02/12 职场文书
物流专业求职信
2014/06/30 职场文书
春节超市活动方案
2014/08/14 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书