• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery实现在新增加的元素上添加事件方法案例分析

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

作者:zhuyangxing 字体:[增加 减小] 来源:互联网 时间:2017-05-11

zhuyangxing通过本文主要向大家介绍了jquery给元素绑定事件,jquery 删除元素,jquery获取子元素,jquery创建元素,jquery 添加元素等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了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');
  }
});

</div>

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

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

</div>

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

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

</div>

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11微信小程序 简单教程实例详解
  • 2017-05-11微信小程序 实例开发总结
  • 2017-05-11js 单引号替换成双引号,双引号替换成单引号的实现方法
  • 2017-05-11jquery实现文字单行横移或翻转(上下、左右跳转)
  • 2017-05-11微信小程序 两种为对象属性赋值的方式详解
  • 2017-05-11js实现用户输入的小写字母自动转大写字母的方法
  • 2017-05-11jquery easyui dataGrid动态改变排序字段名的方法
  • 2017-05-11vue2.0数据双向绑定与表单bootstrap+vue组件
  • 2017-05-11Jquery树插件zTree实现菜单树
  • 2017-05-11Node.JS中事件轮询(Event Loop)的解析

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于Vue实现timepicker
    • 微信小程序 利用css实现遮罩效果实例详解
    • js中创建对象的几种方式
    • jquery submit()不能提交表单的解决方法
    • node安装--linux下的快速安装教程
    • jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
    • Bootstrap table表格简单操作
    • JavaScript常用正则函数用法示例
    • JavaScript数组复制详解
    • JS正则验证多个邮箱完整实例【邮箱用分号隔开】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有