jQuery操作动态生成的内容的方法


Posted in Javascript onMay 28, 2016

本文实例讲述了jQuery操作动态生成的内容的方法。分享给大家供大家参考,具体如下:

由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取:

document.getElementById("xxx").value

对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live()

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
 <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() {
 alert("Bound handler called.");
});

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {
 alert("Live handler called.");
});

然后再添加一个新元素:

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
xml转json的js代码
Aug 28 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
jquery validate表单验证插件
Sep 06 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
javascript 用函数实现继承详解
May 28 #Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
jquery自适应布局的简单实例
May 28 #Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
You might like
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
layui文件上传实现代码
2017/05/20 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
python字符串下标与切片及使用方法
2020/02/13 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
redis限流的实际应用
2021/04/24 Redis