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 ajax BUG:object doesn't support this property or method
Jul 06 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
input输入框内容实时监测(附代码)
Aug 15 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
angular多语言配置详解
May 16 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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小偷的核心程序
2007/04/09 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
Smarty变量用法详解
2016/05/11 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
php实现算术验证码功能
2018/12/05 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
js DOM模型操作
2009/12/28 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python创建子类的方法分析
2019/11/28 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
李培根演讲稿
2014/05/22 职场文书
教师节学生演讲稿
2014/09/03 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
公务员个人考察材料
2014/12/23 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书