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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
js登录弹出层特效
Mar 07 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
3
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php实现微信扫码支付
2017/03/26 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python调用私有属性的方法总结
2020/07/24 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
教师旷工检讨书
2014/01/18 职场文书
综合实践活动总结
2014/05/05 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
公司庆典欢迎词
2015/01/26 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
MySQL 数据 data 基本操作
2022/05/04 MySQL