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 相关文章推荐
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
基于vue.js实现购物车
Jan 15 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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框架Phpbean说明
2008/01/10 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP整合PayPal支付
2015/06/11 PHP
Smarty3配置及入门语法
2017/02/22 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
angular 服务随记小结
2019/05/06 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
工作证明英文模板
2014/10/21 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
MySQL慢查询优化解决问题
2022/03/17 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫