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数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
element-ui 本地化使用教程详解
Oct 28 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python将list转为matrix的方法
2018/12/12 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
《手指教学》反思
2014/02/14 职场文书
平安校园建设方案
2014/05/02 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
标准版离职证明书
2014/09/12 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android