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 animate 动画效果使用说明
Nov 04 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
js控制随机数生成概率代码实例
Mar 21 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 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
基于mysql的bbs设计(四)
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
斜45度寻路实现函数
2009/08/20 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
VSCode搭建React Native环境
2020/05/07 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python import自定义模块方法
2015/02/12 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python中常见错误及解决方法
2020/06/21 Python
python和c语言哪个更适合初学者
2020/06/22 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
项目经理的岗位职责
2013/11/23 职场文书
网吧消防安全制度
2014/01/28 职场文书
贷款委托书怎么写
2014/08/02 职场文书
批评与自我批评总结
2014/10/17 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技