jQuery实现在新增加的元素上添加事件方法案例分析


Posted in Javascript onFebruary 09, 2017

本文实例讲述了jQuery实现在新增加的元素上添加事件方法。分享给大家供大家参考,具体如下:

最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为on

除了jquery api官方的例子外还有以下的例子可以在新增的元素上添加事件

$(document).on("click",'#lyysb a',function(){
  if(!$(this).hasClass('cur')){
    $(this).addClass('cur');
  } else {
    $(this).removeClass('cur');
  }
});

但是把事件绑定在docunmet就和原来的live方法没有区别了。原先的live()方法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法,事件只会绑定到$()函数的选择符表达式匹配的元素上,因此可以精确地定位到页面中的一部分,而事件冒泡的开销也可以减少。

<div id="zkdiv">
  <input type="button" value="展开" id="zk" class="zk"/> <br>
</div>

例如我会在zkdiv中动态添加多个class="zk"的dom节点,也想对动态增加的节点绑定相同的事件则可以通过以下代码实现

//展开按钮点击触发事件
$("#zkdiv").on("click",".zk",function(){
  console.log("on 点击一次");
});
var html2 = "<input type='button' class='zk' value='新生成的展开' />";
$("#zkdiv").append(html2);

这样一来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会大大降低(使用该方法时要确保.on前面的选择器能选择到对象 否则不起作用)

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
微信小程序模拟cookie的实现
Jun 20 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue实现井字棋游戏
Sep 29 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
jquery滚动条插件slimScroll使用方法
Feb 09 #Javascript
JS回调函数简单用法示例
Feb 09 #Javascript
Bootstrap列表组学习使用
Feb 09 #Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 #Javascript
Bootstrap进度条学习使用
Feb 09 #Javascript
详解浏览器渲染页面过程
Feb 09 #Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
You might like
常见的PHP五种设计模式小结
2011/03/23 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python add_argument()用法解析
2020/01/29 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
学习心得体会
2014/01/01 职场文书
优良学风班总结材料
2014/02/08 职场文书
领导调研接待方案
2014/02/27 职场文书
停车场管理协议书范本
2014/10/08 职场文书
司机岗位职责范本
2015/04/10 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python