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 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
详解javascript事件冒泡
Jan 09 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
用javascript制作qq注册动态页面
Apr 14 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连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript cookies操作集合
2010/04/12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python如何实现文本转语音
2016/08/08 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
django form和field具体方法和属性说明
2020/07/09 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
护士思想汇报
2014/01/12 职场文书
小学生期末评语
2014/04/21 职场文书
钳工实训报告总结
2014/11/04 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
党小组评议意见
2015/06/02 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS