jquery .live() .delegate() .bind() .click()区别
什么是.live()?
除了让你对Dom元素现在和将来绑定事件之外,.live() 方法和.bind()方法很像。你可以用.live()方法对没有存在的Dom节点绑定事件。考虑下面的情况。
当用户要离开你的站点时,点击任何连接,你可以警告他:
1
2
3
4
5
6
|
$(document).ready( function () { $( 'a' ).click( function () { alert( "You are now leaving this site" ); return true ; }); }); |
注意:.click()相对于.bind()方法仅仅是一个方便的方法,所以下面的方法和上面是等价的:
1
2
3
4
5
6
|
$(document).ready( function (){ $( 'a' ).bind( 'click' , function (){ alert( 'You are leaving this site' ); return true ; }) }) |
但是现在,你通过javascript在页面添加另一个链接。
1
|
$( 'body' ).append( '<div><a href="...">Check it out !</a></div>' ); |
现在,当用户点击链接时,你的方法不会触发。因为当你对页面所有的<a> 节点,绑定事件的时候,那个链接并不存在。所以我们可以简单的使用.live()取代.bind()。
1
2
3
4
5
6
|
$(document).ready( function () { $( 'a' ).live( 'click' , function () { alert( "You are now leaving this site" ); return true ; }); }); |
现在,如果你添加一个链接到页面,这个绑定的方法就会工作。
.live()怎样工作?
.live()方法并不是绑定到你指定的那个元素上,它实际上是绑定到Dom树的根节点(在我们的例子里,指的是$(document)),把你选定的元素作为参数传递过去。
所以,当你点击一个元素的时候,点击事件会冒泡到根节点。.live()方法执行时,会检查目标元素是否匹配,事件是否是指定的事件。如果都返回true,才会执行事件。
任何.live() 都可以被.die()
如果你了解.bind(),你肯定知道.unbind()。.die()对于.live()也是相同的作用。
当去掉上面例子的事件(不想提醒用户),我们可以简单的:
1
|
$( 'a' ).die(); |
更特别的,如果我们有其他的事件想保留(像hover或者其他的),我们可以只去掉click事件,
1
|
$( 'a' ).die( 'click' ); |
更特别的是,我们可以去掉特定事件的特定方法。
1
2
3
4
5
6
7
8
9
10
11
12
|
specialAlert = function () { alert( "You are now leaving this site" ); return true ; } $(document).ready( function () { $( 'a' ).live( 'click' , specialAlert ); $( 'a' ).live( 'click' , someOtherFunction ); }); // then somewhere else, we could unbind only the first binding $( 'a' ).die( 'click' , specialAlert ); |
.die()的缺点。
当使用.die()去掉.live()时,你只能用和.live()方法相同的目标元素。例如,下面是不行的:
1
2
3
4
5
6
7
8
9
10
|
$(document).ready( function () { $( 'a' ).live( 'click' , function () { alert( "You are now leaving this site" ); return true ; }); }); // it would be nice if we could then choose specific elements // to unbind, but this will do nothing $( 'a.no-alert' ).die(); |
.die()是绑定到由.live()创建的根节点,然后匹配目标元素,去掉他们。但是在上面的例子中,.live()绑定的是$('a.no-alert'),所以jQuery找不到任何东西去取消。
更严重的是:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).ready( function () { $( 'a,form' ).live( 'click' , function () { alert( "You are going to a different page" ); return true ; }); }); // NEITHER of these will work $( 'a' ).die(); $( 'form' ).die(); // ONLY this will work $( 'a,form' ).die(); |
jquery .live() .delegate() .bind() .click()区别的更多相关文章
- jQuery live与bind的区别
平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦.例如评论分页后对评论内容的JS验证会失效等.在jQuery1.3之前有一个插件会解 ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- jQuery绑定事件方法及区别(bind,click,on,live,one)
第一种方式: ? 1 2 3 4 5 $(document).ready(function(){ $("#clickme").click(function(){ alert(& ...
- jQuery 请指出'.bind()','.live()'和'.delegate()'的区别
http://kb.cnblogs.com/page/94469/网上好多类似的 简言之bind可以绑定页面上已有的,live和delegate可以绑定到还未存在于页面中的元素之上.delegate又 ...
- jQuery事件函数bind,live,delegate的区别
DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...
- jQuery事件:bind、delegate、on的区别
最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...
- jquery中bind,live,delegate,on的区别
这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...
- 【转】jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
随机推荐
- protobuf 语法简介
protobuf 语法简介 1.基本语义 在.proto文件中,最基本的数据类型为message,如其定义所示,由message引导,之后是message类型的名字,之后是由{}包含的各个域(fiel ...
- 动态SQL(章节摘要)
1,使用动态SQL能够在依赖对象不存在时创建子程序. 2.动态SQL主要利用EXECUTE IMMEDIATE语句运行DML,DDL,DCL等语句操作. 3,假设使用了绑定变量,则必须在EXECUTE ...
- rapidjson库的基本使用
转自:https://blog.csdn.net/qq849635649/article/details/52678822 我在工作中一直使用的是rapidjson库,这是我在工作中使用该库作的一些整 ...
- go语言之进阶篇error接口的使用
1.error接口的使用 示例: package main import "fmt" import "errors" func main() { //var e ...
- Solr4.0+IKAnalyzer中文分词安装(转)
有近2年没接触Solr跟Lucene了,这2年自己跟solr/lucene都发生了很多变化.不过有种疏途同归的感觉,那就是都向分布式/云和监控靠了.2年前接触了solrcloud,那时大概玩了一周.那 ...
- [leetcode]Substring with Concatenation of All Words @ Python
原题地址:https://oj.leetcode.com/problems/substring-with-concatenation-of-all-words/ 题意: You are given a ...
- 领扣-754 到达终点数字 Reach a Number MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 异常 Exception 堆栈跟踪 异常捕获 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- C#,深入浅出全接触(一)
一.什么是 C#? C# 是由Microsoft开发的一种新型编程语言,由于它是从C和C++ 中派生出来的,因此具有C++的功能.同时,由于是Microsoft公司的产品,它又同 VB一样简单.对于w ...
- window.location属性用法及解决一个window.location.search为什么为空的问题
通常用window.location该属性获取页面 URL 地址: 1.什么是window.location? 比如URL:http://b.a.com:88/index.php?name=kang& ...