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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
用JS实现选项卡
Mar 23 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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
玛琪朵 Macchiato
2021/03/03 咖啡文化
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
打架检讨书50字
2014/01/11 职场文书
法学院方阵解说词
2014/01/29 职场文书
贷款承诺书范文
2014/05/19 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
休假证明书
2015/06/24 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python