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 相关文章推荐
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
微信小程序自定义支持图片的弹窗
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
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
js模态对话框使用方法详解
2017/02/16 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python中bytes和str类型的区别
2019/10/21 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
校领导推荐信
2013/11/01 职场文书
采购主管的岗位职责
2013/12/17 职场文书
毕业晚会主持词
2014/03/24 职场文书
群众路线党课主持词
2014/04/01 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
董事长助理岗位职责
2015/02/11 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
ES6 解构赋值的原理及运用
2021/05/25 Javascript