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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue的Options用法说明
Aug 14 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
React Hook用法示例详解(6个常见hook)
Apr 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
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python中property属性实例解析
2018/02/10 Python
python实现随机梯度下降法
2020/03/24 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
三个python爬虫项目实例代码
2019/12/28 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
中间件分为哪几类
2016/09/18 面试题
几道Java和数据库的面试题
2013/05/30 面试题
应届本科生推荐信范文
2013/12/25 职场文书
售后求职信范文
2014/03/15 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
社区服务活动总结
2014/05/07 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python