jQuery中delegate和on的用法与区别详细解析

2023-10-27

在jQuery1.7中 .delegate()已被.on()取代。对于早期版本,它仍然使用事件委托的最有效手段。
在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。

.delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

复制代码代码如下:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );

例如:.delegate()  code:
复制代码代码如下:

$("table").delegate("td","click",function(){
 alert("hello");
});

.on()  code:
复制代码代码如下:

$("table").on("click", "td", function() {
        alert("hi");
});

PS: 两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如 
复制代码代码如下:

$("table").delegate("button","click",function(){...});
$("table").on("click", "p", function(){...});

就不起作用,因为正常情况下,table子元素应为tr,td...

on(events,[selector],[data],fn),参数[selector]是可选,
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如:

复制代码代码如下:

$("table").on("click", ".td1", function() {
       alert("hi");
});

过滤class为td1的table子元素

而delegate的selector是必需的。

http://www.jb51.net/article/46224.htm


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery中delegate和on的用法与区别详细解析 的相关文章

  • 如何使用 JavaScript 或 jQuery 清除 Google Chrome、Mozilla Firefox 和 Safari 中的剪贴板数据

    我正在开发一个网站 我想在使用 JavaScript 或 jQuery 查看我的网站时按下打印屏幕按钮时清除剪贴板数据 谁能帮我解决这个问题 我在 Internet Explorer 中成功处理了这个问题 提前致谢 由于安全原因 您无法使用
  • 显示 div 内的用户名列表

    我是 jQuery 新手 在我的项目中 我创建了一个类User其中代码如下所示 static ConcurrentDictionary
  • 如何在模态窗口中显示pdf? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个模式窗口 其中包含锚文本 当我单击此链接时 它必须调用其他位置的 pdf 并将其显示在弹出窗口中 我怎样才能做到这一点 请帮忙
  • IE 中的 jQuery 鼠标闪烁

    当我在 IE 中执行 fadeIn fadeOut slideUp slideDown toggle 等 jQuery 函数时 鼠标总是闪烁 沙漏在光标旁边的视图中快速闪烁 我尝试了不同的方法来在动画进行时完全隐藏鼠标 但没有效果 而且在大
  • 如何阻止用户重复单击 jQuery AJAX 调用?

    我有一个包含以下脚本的网页 JavaScript function LinkClicked var stage this id var stop ContentPlaceHolderMenu txtDate val var nDays Co
  • 包含从代码隐藏 (ASP.NET C#) 到 ASPX 中的图像概述的图像列表 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 从表中删除除第一个之外的所有子元素?

    My HTML table tr td 1 td tr tr td 2 td tr tr td 3 td tr table 如何删除用户表中除第一个之外的所有子元素使用 jQuery 我尝试过的 user table children re
  • 单击表格行可显示更多信息

    我正在尝试使用 jQuery 来实现以下目标 当单击一个表格行时 会显示表格行内的 info div 如果单击另一个表格行 则当前显示的任何其他 info 元素将被隐藏 并根据表格行显示新的 info div已被点击 这个问题是 代码无法正
  • jQuery 绑定效率

    我在数千个元素和输入上使用多个 jQuery 绑定时遇到加载速度问题 是否有更有效的方法来执行此操作 该网站能够通过ajax调用在产品列表之间切换 页面无法刷新 有些列表有 10 个项目 有些有 100 个 有些超过 2000 个 当我开始
  • 如何使用多个 select2 框过滤表格?

    我正在尝试使用 和多个 select2 框的类来过滤表格 表格 HTML table class table tbody tr class kanban event Austin td td tr tr class csm event Ch
  • 如何从 jQuery 选择器中排除某个类?

    我有以下代码 input type text wijtextbox 我想要的是 如果我的文本框的类是本机的 则不应用 wijtextbox 有没有办法通过添加到上面的选择器来以某种方式排除它 将其设为 wijtextbox
  • 获取异常 jQuery 必须包含在 Bootstrap 的 JavaScript 之前

    我遇到以下异常 bootstrap js 240 Uncaught TypeError Bootstrap 的 JavaScript 需要 jQuery jQuery 必须包含在 Bootstrap 的 JavaScript 之前 在 Ob
  • jquery悬停一次?

    jquery 使悬停函数执行一次然后停止的方法是什么 one 不起作用 button color 2 hover function dosmth 谢谢 Hover http api jquery com hover 绑定处理程序鼠标输入 h
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 返回视图作为 JSON 对象的一部分

    我有一个应用程序只加载一次完整视图 我这样做的原因并不重要 重要的是 其余内容只会以部分视图的形式返回 除了一些内容之外 我还有一些 JSON 对象 我想通过每个 AJAX 请求在服务器之间来回传递 有没有办法返回一个 JSON 对象 并将
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子

随机推荐

  • vue+vue-matomo实现埋点

    安装 npm install vue matomo save main js import createApp from vue import manotoUse from utils manotoUse import router fro
  • linux 符号连接文件,Linux 硬链接和软链接(符号链接)

    什么是目录 Linux 文件系统是树状结构的 根目录下存在一系列子目录 目录里边有文件或者子目录 但问题在于 目录是什么 文件又是什么 文件是 数据 属性 比如名字 创建时间 所有者之类 目录是 一个列表 列表中的每一项是 inode gt
  • 婴幼儿奶酪怎么选

    总原则 天然奶酪 高钙 少钠 无添加剂 奶酪 分天然奶酪 和再制奶酪 天然奶酪成分非常简单 是主要以牛奶为原材料 没有经过深加工的原生奶酪 再制奶酪配料表复杂 是天然奶酪加上水 以及添加剂后的产物 营养价值降低不少 天然奶酪 并且高钙低钠是
  • Ubuntu18.04 “A start job is running for Raise network interface(5min 1s)”

    在启动Ubuntu时出现如下情况 5min过后 虽然会进入ubuntu的用户登陆界面 但是登陆成功后 输入ifconfig命令 如下图 会发现ens33中没有ip地址 因此xshell无法与该虚拟机进行远程连接 经过分析 我采用的连接方式为
  • java swing 天天酷跑游戏 功能完善 完整代码 下载即可以运行

    今天天气不错 利用一段时间给大家分享一个天天酷跑的游戏435 该游戏也属于一个比较优秀的作品 整个系统界面漂亮 有完整得源码 希望大家可以喜欢 喜欢的帮忙点赞和关注 一起编程 一起进步 开发环境 开发语言为Java 开发环境Eclipse或
  • 使用 styled-components 定义组件样式

    每个项目产品都要加埋点 加500行埋点是不是会占用你一两天的时间而且很容易犯错 想只用一小时准确加完这500行埋点剩下一天喝茶聊天么 来试试这520web工具 高效加埋点 目前我们公司100号前端都在用 因为很好用 所以很自然普及开来了 推
  • django-xadmin自定义widget插件(自定义详情页字段的显示样式)

    有时候我们想要修改xadmin详情页字段的显示方式 比如django默认的ImageField在后台显示的是image的url 我们更希望看到image的缩略图 再比如django将多对多字段显示为多选的下拉框或者左右选择栏的方式 向图片展
  • axios+qs发送ajax请求获取接口数据

    axios qs发送ajax请求获取接口数据 一 html页面中需要引入axios和qs库 如下 二 后台接口如下 1 getDemo1接口 测试传参id 必须 和 name 不必须 CrossOrigin RestController p
  • sort排序

    文章目录 一 Arrays sort 1 1 基本数据类型排序 1 2 引用对象类型排序 二 Collections sort Java中常用的数组或集合排序的方法有两个 一个是java util Arrays中的静态方法Arrays so
  • 案列 : 提供index.html页面,页面中有一个省份 下拉列表 2. 当 页面加载完成后 发送ajax请求,加载所有省份

    一 首先明确需求 案例需求 1 提供index html页面 页面中有一个省份 下拉列表 2 当 页面加载完成后 发送ajax请求 加载所有省份 二 数据库编写 CREATE DATABASE NBA 创建数据库 USE NBA 使用数据库
  • 深度学习第一篇论文——半监督学习Mean Teacher 的学习

    最近一个月刚接触深度学习 导师给了一篇论文 mean teacher 让我先理解然后跑论文里面的代码 这个过程中我出现了很多问题 借这篇blog记录下来 也是鼓励自己接着学下去 Mean Teacher 的论文地址 https arxiv
  • jsp之cookie的基本操作&&实现用户登录cookie记录用户信息

    jsp状态管理 因为http的无状态性 所以可以用session或cookie技术保存用户信息 而cookie可以记录信息可以判定注册用户是否已经登录网站 购物车的应用 浏览记录 但是有安全风险 创建cookie Cookie cookie
  • keil调试查看ROM或RAM

    Ctrl F5或点击调试按钮进入调试界面 在工具栏上点击Memory Windows 则右下角出现Memory1的页面 默认出现的是ROM的查看界面 在Address一栏输入十六进制的地址即可查看ROM里面的数值 点击Memory Wind
  • 动态修改JavaBean中的注解的参数值

    我这里有一个需求需要修改Person类中的一个属性上的注解的值进行修改 例如 public class Person private int age ApiParam access lala private String name get
  • 怎么做验收测试?

    本文是本系列文章的第四篇 也是最后一篇 主要讲述我们在Lyft面对越来越多的开发人员和服务时 如何扩展开发实践 第一部分 开发和测试环境的历史 第二部分 加快本地开发的一些优化 第三部分 预发布环境通过重载形式来扩展服务网格 第四部分 怎么
  • halcon给图像添加不同颜色的透明遮罩(叠加透明ROI)

    目录 前言 方法 1 给单通道图像添加透明遮罩 2 给RGB图像添加透明遮罩 参考链接 前言 最近想给图片叠加上透明region方便展示 以前一直用overpaint region算子搭配add image就行 这次用单通道图竟然叠加出来的
  • typec耳机知识介绍

    数字耳机和模拟耳机 模拟耳机即我们的常见的3 5mm接口的耳机 包括左右声道 地或者mic 如左图 数字耳机 右图 包含一个usb声卡 DAC ADC amp 模拟耳机 当数字耳机接入到手机 otg 或者电脑后 手机或者电脑识别到了usb设
  • 如何在本地测试ajax时间,为什么在本地测试ajax反应很慢

    在本地测试ajax接收分页数据 要反应1s左右 以上 但是放到服务器上就100ms到 900多ms之间 有什么好的办法解决ajax获取速度慢吗 已经把分页数据换成json了 没多大改善 数据大小显示是在2 9kb 耗时1 03s 处理逻辑就
  • C++ 虚函数、虚函数表剖析

    C 中的虚函数的作用主要是实现了多态的机制 关于多态 简而言之就是用父类型别的指针指向其子类的实例 然后通过父类的指针调用实际子类的成员函数 那么问题来了C 又是如何实现这种技术的呢 C 使用了一种动态绑定的技术 这个技术的核心是虚函数表
  • jQuery中delegate和on的用法与区别详细解析

    在jQuery1 7中 delegate 已被 on 取代 对于早期版本 它仍然使用事件委托的最有效手段 在事件绑定和委派 delegate 和on在一般情况下 这两种方法是等效的 delegate 指定的元素 属于被选元素的子元素 添加一