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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Bootstrap表单布局
Jul 19 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
javascript关于“时间”的一次探索
Jul 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
js获取Get值的方法
2016/09/29 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python MD5加密的示例
2020/10/19 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
邀请函格式范文
2015/02/02 职场文书
商场营业员岗位职责
2015/04/14 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS