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对象是否可用的最正确方法分析
Oct 03 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 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 pdo操作数据库示例
2017/03/10 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python 实现return返回多个值
2019/11/19 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
创业计划书模版
2014/02/05 职场文书
银行简历自我评价
2014/02/11 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
SQL Server删除表中的重复数据
2022/05/25 SQL Server