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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
认识less和webstrom的less配置方法
Aug 02 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue下载二进制流图片操作
Oct 26 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 minixml详解
2008/07/19 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
js代码实现轮播图
2020/05/04 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
绿色学校实施方案
2014/03/31 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python