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功能函数(2009-06-04更新)
Jun 04 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
layui 弹出删除确认界面的实例
Sep 06 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防CC攻击实现代码
2011/12/29 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
Python 多核并行计算的示例代码
2017/11/07 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python实现磁盘日志清理的示例
2020/11/05 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
求职简历自我评价范例
2014/03/12 职场文书
现金出纳岗位职责
2014/03/15 职场文书
股权转让意向书
2014/04/01 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
先进员工获奖感言
2014/08/14 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年终个人工作总结
2014/11/07 职场文书
表扬稿格式范文
2015/01/16 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB