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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
javascript getElementsByTagName
Jan 31 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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配置参数总结
2013/06/14 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python 类详解及简单实例
2017/03/24 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
毕业自我鉴定范文
2013/11/06 职场文书
公司培训心得体会
2014/01/03 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
中国入世承诺
2014/04/01 职场文书
医院搬迁方案
2014/06/14 职场文书
英语教研活动总结
2014/07/02 职场文书
五五普法心得体会
2014/09/04 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
QT与javascript交互数据的实现
2021/05/26 Javascript