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 相关文章推荐
javascript 手动给表增加数据的小例子
Jul 10 Javascript
js简单实现交换Li的值
May 22 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue之延时刷新实例
Nov 14 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
域名和cookie问题(域名后缀)
2012/10/10 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
微信小程序实现首页弹出广告
2020/12/03 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python 开发Activex组件方法
2009/11/08 Python
spyder常用快捷键(分享)
2017/07/19 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python3 中文文件读写方法
2018/01/23 Python
Python星号*与**用法分析
2018/02/02 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
基于python实现把图片转换成素描
2019/11/13 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
大学课外活动总结
2014/07/09 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书