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 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
让mocha支持ES6模块的方法实现
Jan 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
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python实现感知器模型、两层神经网络
2017/12/19 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
招商业务员岗位职责
2013/12/16 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
英文商务邀请信
2014/01/22 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
市场策划求职信
2014/08/07 职场文书
五四演讲稿范文
2014/09/03 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android