jQuery中delegate与on的用法与区别
在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是必需的。
jQuery中delegate与on的用法与区别的更多相关文章
- jQuery中bind与live的用法与区别
首先介绍这两个方法之前,我们常用的是click()方法 $("a").click(function() { alert("hello"); }); click( ...
- jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jQuery中的text(),html(),val()用法
jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...
- jquery中this与$(this)的用法区别
jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- 【Java学习笔记之二十九】Java中的"equals"和"=="的用法及区别
Java中的"equals"和"=="的用法及区别 在初学Java时,可能会经常碰到下面的代码: String str1 = new String(" ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- 分组函数group by和Oracle中分析函数partition by的用法以及区别
1.分组函数group by和Oracle中分析函数partition by的用法以及区别 2.开窗函数.
随机推荐
- Swift-开发 # 1.2版本迁移
{ Parallels: 可以将一个win程序拖到mac中运行. } --类似于虚拟机 遇到的几大问题: 1.自动修改无效? --忽略它的存在,坑. 2.无止境的修改,还是错? --使用替换工具-&g ...
- JS开发调试
开发调试工具 页面制作之开发调试工具(1) 开发工具介绍 开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE) 常用的文本编辑器:Sublime Text.Notepad++.EditPl ...
- LSM树存储模型
----<大规模分布式存储系统:原理解析与架构实战>读书笔记 之前研究了Bitcask存储模型,今天来看看LSM存储模型,两者尽管同属于基于键值的日志型存储模型.可是Bitcask使用哈希 ...
- linux 内核睡眠与唤醒
休眠(被阻塞)的进程处于一个特殊的不可执行状态.进程休眠由多种原因,但肯定都是为了等待一些事件.事件可能是一 段时间从文件I/O读取更多数据,或者是某个硬件事件.一个进程还由可能在尝试获取一个已被占用 ...
- UVA - 11986 Save from Radiation
Description J Save from Radiation Most of you are aware of Nuclear Power Plant Explosion at Fukushim ...
- SQL点滴31—SQL语句中@@IDENTITY和@@ROWCOUNT区别
原文:SQL点滴31-SQL语句中@@IDENTITY和@@ROWCOUNT区别 SQL语句中@@IDENTITY和@@ROWCOUNT区别 在一条 INSERT.SELECT INTO 或大容量复制 ...
- Floodlight controller 线程池模型
官方文档对于ThreadPool的描写叙述是:ThreadPool is a Floodlight module wrapper for a Java's ScheduledExecutor ...
- 在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样?
原文:在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样? <a href="javascript:alert(this.innerHTML ...
- Elegant Box主题wpdb::prepare() 报错[已解决]
整理书签,发现个网页,是解决Elegant Box主题与新版Wordpress3.5主题不兼容的(3.5改了一个函数的参数个数所致).记得当时使用NeoEase出的主题的时候两次遇到这个问题,费了点功 ...
- [译]Java 设计模式之适配器
(文章翻译自Java Design Pattern: Adapter) 适配器模式在现在的Java框架中被频繁的用到. 当你想去使用一个存在的类而且它的接口和你需要的不吻合,或者是你想去创建一个可复用 ...