[每日一学]live vs bind

live()与bind()不同的是一次只能绑定一个事件。

这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

要移除用live绑定的事件，请用die方法

Html

		<a class="a1" href="#">A1</a>
		<a class="a2" href="#">A2</a>
		<a class="a3" href="#">A3</a>
		<ul>
			<li><a href="#">node one</a></li>
			<li><a href="#">node two</a></li>
		</ul>
		<a href="#" class="addli">添加新元素</a>

Jquery

		$(".a1").live("click",function(event){
			alert("A1 with live event");
		})

		$(".a2").click(function(){
			alert("A2 with normal click event");
		})

		$(".a3").bind("click",function(){
			alert("A3 with bind event");
		})

		//测试die
		//$(".a1").die("click");   //click事件被移除
		//$(".a2").die("click");   //click事件依然有效
		//$(".a3").die("click");   //click事件依然有效

		//测试unbind
		//$(".a1,.a2,.a3").unbind("click");  //A1的click事件依然有效，A2和A3的click事件被删除

		//测试live和bind的区别
		/*$("ul > li > a").live("click",function(event){
			alert("test");
		})*/
		/*$("ul > li > a").bind("click",function(){
			alert("test");
		})*/
		/*$(".addli").click(function(){
			$("ul").append('<li><a href="#">new node</a></li>');
		})*/