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的IE和Firefox兼容性汇编
Jul 01 Javascript
JavaScript 参考教程
Dec 29 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
main.php
2006/12/09 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python构建自定义回调函数详解
2017/06/20 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
python开发一款翻译工具
2020/10/10 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
护士上岗前培训自我鉴定
2014/04/20 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2015元旦标语横幅
2014/12/09 职场文书
小学四年级学生评语
2014/12/26 职场文书
国庆节慰问信
2015/02/15 职场文书
爱国主义影片观后感
2015/06/18 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android