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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 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编程中八种常见的文件操作方式
2006/11/19 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
分享vim python缩进等一些配置
2018/07/02 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
J2EE模式面试题
2016/10/11 面试题
自考自我鉴定范文
2013/10/30 职场文书
诚信承诺书范文
2014/03/27 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android