jQuery中的die()与live()

什么是.live()？

函数的.live()类似.bind()，除此之外，它允许你绑定DOM元素现在和以后动态生成出来的dom节点，你可以绑定事件不存在的元素。

比方说，在点击链接时弹出一个提示消息：

$(document).ready( function() {  
	$('a').click( function() {  
		alert("hello");  
		return true;  
	});  
});

click只是实现一般的.bind()绑定点击事件，下面的代码相当于上面的实现：

$(document).ready(function() {  
	$('a').bind("click",function(){  
		alert("hello");  
		return true;  
	});  
});

现在动态的向页面中添加一个链接（a）：

$('body').append('<div><a href="#">Check me!</a></div>');

当点击这个链接时，上面的click事件是没有被绑定的，因为在绑定的时候这个链接还不存在，这时候需要用live()绑定事件。

$(document).ready(function() {  
	$('a').live("click",function(){  
		alert("hello");  
		return true;  
	});  
});

这样你以后添加进来的链接都可以绑定点击事件。

.live()是如何工作的？

.live()实际上不是将你的事件绑定到element元素上面，而是将事件绑定到dom数的根节点上面（$(document)）,将你的元素选择器作为一个参数。

当你点击一个元素时，click事件就会在DOM树向上传递，直到达到根节点（document）。这个.click()事件的触发器已经在根节点被.live()创建。这个触发方法首先检测被点击的目标是否和live()调用的选择器（$('a')）相匹配，如果匹配事件方法执行。

注意：不管你点击根节点内的任何元素，这个检查都会发生（绝对影响性能了）。

什么是.die()？

die()跟unbind()是类似的，用于接触live()绑定事件。当我们不希望用户点击提示的时候，可以这样做：

$('a').die();  //移除所有绑定的live事件。 
//具体点，如果还有其他的事件被绑定且需要保留，例如hover或其他，可以只解除click事件绑定。  
$('a').die('click');  
//再具体些，如果像下面似的已经定义了方法名，可以解除绑定指定的方法。  
var oneAlert = function() {  
	alert("hello one!");  
}   
$(document).ready( function() {  
	$('a').live( 'click', oneAlert );  
	$('a').live( 'click', someOtherFunction );  
});  
$('a').die( 'click', specialAlert );

关于.die()的问题~

.die()有一个缺点：解除事件绑定的时候，它只能使用.live()方法中绑定时用到的元素选择器，不能像下面这样：

$(document).ready(function() {  
	$('a').live("click",function(){  
		alert("hello");   
	});  
});  
$("a.alert").die(); //解除绑定

事实上$("a.alert")是不存在绑定的，所以jQuery找不到任何绑定事件去掉，所以die()不起作用。

还有就是下面这种多选择器的情况：

$(document).ready( function() {  
	$('a,form').live( 'click', function() {  
		alert("hello!");    
	});  
});  
//这两种方式不能解除绑定 
$('a').die();  
$('form').die();  
//只有这种方式才可以
$('a,form').die(); 

转载于:https://my.oschina.net/u/912681/blog/130967