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 location几个方法小姐
Jul 09 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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
PHP4之真OO
2006/10/09 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Vue中计算属性computed的示例解读
2017/07/26 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python Flask实现restful api service
2017/12/04 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
linux环境下Django的安装配置详解
2019/07/22 Python
django的model操作汇整详解
2019/07/26 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
烹调加工管理制度
2014/02/04 职场文书
最美护士演讲稿
2014/08/27 职场文书
工作所在部门证明
2014/09/21 职场文书
离职证明范本
2015/06/12 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书