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 相关文章推荐
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
小程序实现文字循环滚动动画
Jun 14 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php命名空间学习详解
2014/02/27 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
Javascript拓展String方法小结
2013/07/08 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
js运动事件函数详解
2016/10/21 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python面向对象之继承代码详解
2018/01/29 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
应届护士推荐信
2013/11/16 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
员工安全责任书范本
2014/07/24 职场文书