微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

jQuery获取动态生成的元素示例_jquery

php中文网
发布： 2016-05-16 16:44:33
原创
1957人浏览过

需求描述：页面上可以动态添加数据,比如table,点击按钮可以动态添加行。又或页面
加载时table数据是通过ajax从后台获取的。而这时我们想要获取其中的某个值,又该如何获取呢？

如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法

Creatext AI
Creatext AI

专为销售人员提供的 AI 咨询辅助工具

Creatext AI 39
查看详情 Creatext AI
复制代码 代码如下:

$(".button").live("click",function(){
console.info($("#mytd").html());
})

而如果不是通过某个事件,当页面加载的时候我们就要获取值或进行其他操作

live()方法就不行了,因为我们无法传入一个事件。

比如以下代码：
复制代码 代码如下:








以上代码很简单,就是通过post从后台返回的值添加到中

后台返回数据为 而我们要在post之后获取id为mytd的值,

此时是获取不到的,我们从浏览器中就可以观察出问题：
jQuery获取动态生成的元素示例_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获取动态生成的元素示例_jquery 
此时再获取的时候页面已加载完数据。
北京 深圳
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Extjs Label的 fieldLabel和html属性值对齐的方法_extjs 下一篇：jquery 实现input输入什么div图层显示什么_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript参数传递_值引用机制 JavaScript函数传参是按值传递引用。基本类型传递值的副本，修改不影响原变量；对象类型传递引用地址的副本，可修改对象属性但重新赋值参数不影响原引用。
2025-11-30 18:34:02
333
JavaScript编码规范_Airbnb风格指南 AirbnbJavaScript风格指南推荐使用const和let替代var，字符串用单引号，优先采用箭头函数、解构赋值和ES6模块语法，要求两个空格缩进、关键字后加空格并始终显式添加分号，以提升代码可读性与一致性。
2025-11-30 18:34:02
784
模块解析：Node.js中的require机制剖析 Node.js的require机制是模块化开发的核心，遵循CommonJS规范，支持核心模块、路径模块和第三方模块的加载；按优先级顺序查找模块，未指定扩展名时依次尝试.js、.json、.node；加载后缓存于require.cache，避免重复执行，提升性能；每个模块被包裹在函数闭包中，拥有独立作用域，通过exports导出内容，支持动态加载但同步特性可能影响启动速度；相比ES6的import需配置启用，require仍广泛用于现有项目。
2025-11-30 18:32:02
966
JavaScript物理模拟_刚体运动与碰撞检测 刚体运动通过牛顿力学公式更新位置与速度，结合重力、摩擦力等受力计算；碰撞检测常用AABB判断矩形碰撞，通过圆心距与半径和比较判断圆形碰撞，实现JavaScript物理模拟。
2025-11-30 18:31:02
428
JavaScript网络请求_Axios拦截器与适配器原理 Axios通过拦截器和适配器实现请求的灵活处理与跨平台支持。拦截器基于Promise链式调用，按顺序执行请求/响应的预处理；适配器根据环境自动选择底层HTTP实现，如浏览器的XMLHttpRequest或Node.js的http模块，二者协同完成网络请求的统一管理与定制化扩展。
2025-11-30 18:28:02
173
JavaScript游戏开发_物理引擎与碰撞检测 物理引擎如Matter.js可模拟重力、碰撞等真实物理效果，结合AABB或圆形碰撞检测实现精准交互；通过监听碰撞事件可自定义游戏逻辑，如角色踩踏击杀敌人；小型项目可用简单检测方法，复杂场景推荐成熟引擎以保证性能与手感。
2025-11-30 18:26:02
142
机器学习基础_javascript智能应用 JavaScript可通过TensorFlow.js、Brain.js等库在前端实现机器学习，适用于图像识别、情感分析等场景，以ML5.js入门更简单，通常采用前端推理、后端训练的协同模式，在保证低延迟和隐私的同时需权衡模型体积与设备性能。
2025-11-30 18:24:07
312
JavaScriptWeb组件_CustomElementsAPI CustomElementsAPI允许开发者定义自定义HTML标签并赋予其行为与结构，通过customElements.define()注册，支持自主元素（如）和基于原生元素扩展的内置元素（如），结合生命周期回调（connectedCallback、attributeChangedCallback等）实现组件逻辑控制，配合ShadowDOM可达成样式隔离，适用于构建高复用、轻量级、原生封装的UI组件库。
2025-11-30 18:19:07
524
JavaScript知识图谱_概念关系与学习路径规划 JavaScript知识图谱的核心是系统掌握语言基础、运行机制、现代语法与生态工具。从变量声明、数据类型等语法入手，理解执行上下文、闭包、原型链与事件循环等核心机制，继而学习ES6+的箭头函数、模块化、class与async/await，最后通过npm、Webpack、React/Vue、Node.js等生态工具实现全栈开发能力，形成由浅入深、前后呼应的完整体系。
2025-11-30 18:19:02
756
JavaScript框架原理_VueReact内部机制解析 Vue通过响应式系统自动追踪依赖，数据变化驱动视图更新；React则依赖手动状态更新与虚拟DOM比对，由开发者触发渲染。
2025-11-30 18:17:02
113
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部