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 13 Javascript
js 字符串操作函数
Jul 25 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
JavaScript前端面试组合函数
Jun 21 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
php中用foreach来操作数组的代码
2011/07/17 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
js 数组操作代码集锦
2009/04/28 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
JQueryDOM之样式操作
2019/03/27 jQuery
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
个人简历自我评价
2014/02/02 职场文书
2014年班级工作总结
2014/11/14 职场文书
毕业证明模板
2015/06/19 职场文书
结婚十年感言
2015/07/31 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python+Appium实现自动抢微信红包
2021/05/21 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server