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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
js闭包学习心得总结
Apr 17 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
详解如何修改 node_modules 里的文件
May 22 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python中的默认参数实例分析
2018/01/29 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python操作kafka实践的示例代码
2019/06/19 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python中实现输入一个整数的案例
2020/05/03 Python
如何真正的了解python装饰器
2020/08/14 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
食品安全检查制度
2014/02/03 职场文书
毕业生面试求职信
2014/06/23 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
基层党支部整改方案
2014/10/25 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
搞笑结婚保证书
2015/05/08 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
施工安全责任协议书
2016/03/23 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书