jQuery给动态添加的元素绑定事件的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下:

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

<div id="testdiv">
  <ul></ul>
</div>

需要给<ul>里面动态添加的<li>标签添加click事件
 
jquery 1.7版以前使用live动态绑定事件

$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以后使用on动态绑定事件

$("#testdiv ul").on("click","li", function() {
     //do something here
 });

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
ExpressJS入门实例
Jan 14 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
You might like
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php use和include区别总结
2019/10/13 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python线程池如何使用
2020/05/28 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
2014年公司迎新年活动方案
2014/02/24 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书