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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
vue 文件目录结构详解
Nov 24 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jQuery中get()方法用法实例
2014/12/27 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Python处理文本换行符实例代码
2018/02/03 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
施工班组长岗位职责
2014/01/05 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书