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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Python文件处理
2016/02/29 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
关于毕业的广播稿
2014/01/10 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
家长高考寄语
2015/02/27 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
MongoDB支持的数据类型
2022/04/11 MongoDB