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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
webpack配置之后端渲染详解
Oct 26 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
万能的php分页类
2017/07/06 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
python简单实现获取当前时间
2016/08/27 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python转换时间的图文方法
2019/07/01 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python中def是做什么的
2020/06/10 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
党内外群众意见范文
2015/06/02 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
高中政治教师教学反思
2016/02/23 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers