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 相关文章推荐
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Vue实现根据hash高亮选项卡
May 27 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实现验证码功能
2006/10/09 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
使用Python更换外网IP的方法
2018/07/09 Python
详解小白之KMP算法及python实现
2019/04/04 Python
python for和else语句趣谈
2019/07/02 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python类共享变量操作
2020/09/03 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
会计的岗位职责
2014/03/15 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
机动车登记业务委托书
2014/10/08 职场文书
甲午风云观后感
2015/06/02 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书