一、 $. live () 方法

         根據jQuery的官方描述，live方法在1.7中已經不建議使用，在1.9中刪除了這個方法。並建議在以後的程式碼中使用on方法來替代。

返回值:jQuery live(type, [data], fn)

概述

作用：對指定元素新增相應事件，即使這個元素是後來頁面動態生成的，依舊有用。如：

         id為“newDiv”的一個div是頁面動態生成的元素，我們現在點選這個元素後彈框。做法很多，舉個對比例子：

html程式碼

<span style="font-size:14px;"><div id="newDiv">click me</div></span>
 

js程式碼

一、

<span style="font-size:14px;"><span style="font-size:12px;color:#333333;">$('#newDiv').on('click', function() {
  alert("Live handler called."); 
});</span></span>

發現點選後沒有彈框。

二、

<span style="font-size:14px;"><span style="font-size:12px;color:#333333;">$('#newDiv').live('click', function() {
  alert("Live handler called."); 
});</span></span>
 

點選後彈框。

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函式，而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。

事件委託

         .live() 方法能對一個還沒有新增進DOM的元素有效，是由於使用了事件委託：繫結在祖先元素上的事件處理函式可以對在後代上觸發的事件作出迴應。傳遞給 .live() 的事件處理函式不會繫結在元素上，而是把他作為一個特殊的事件處理函式，繫結在 DOM 樹的根節點上。

二、 $.on() 方法

on方法可以接受三個引數：事件名、觸發選擇器、事件函式。

需要特別注意的是：on方法中間的這個觸發選擇器就是你將要新增的HTML元素的類名、id或者元素名，使用它就可以實現live的效果。

例如我的html文件中已經有了一個id為parent的div，我將要在這個div內部再動態新增一個class為son的span，然後我為這個span繫結一個事件，那麼我需要這樣寫：

<span style="font-size:14px;">$('#parent').on('click','.son',function(){alert('test')});</span>

這個觸發選擇器實際上就是在 JQ內部判斷了一次事件引數的$(e.target).is(selector)，只有觸發物件匹配觸發選擇器才會觸發。這是利用了事件冒泡的機制來完成的，原本的live也是使用冒泡機制所以既然on可以實現那麼live也就沒有存在的必要了，只不過為了相容讓它從1.7苟延殘喘的活到了1.9而已。
　　例如，在低版本IE中A標籤在滑鼠按下時候會出現虛線邊框，這是由focus造成的。我們只要在全域性事件中做點手腳就能解決這個問題。在現代瀏覽器中focus是不冒泡的，但是低版本瀏覽器中可以冒泡。所以對於低版本瀏覽器中對focus使用live是有效的。在jQuery1.9之前的版本我們可以這樣寫：

<span style="font-size:14px;">$("a").live("focus",function(){
  this.blur();
});</span>

jQuery1.9之後由於live被刪除了，但不能這樣寫，這樣寫只能相當於bind()的用法：

<span style="font-size:14px;">$(document).on("focus",function(){
  this.blur();
});</span>

所以要替代live事件，應該這樣寫：

<span style="font-size:14px;">$(document).on("focus","a",function(){
  this.blur();
});</span>

還要注意個問題，如果是從live的寫法換成on的寫法別忘了調整呼叫鏈。因為live的返回值是事件觸發的物件，而使用on則是在容器物件上。

<span style="font-size:14px;"> 
//jQuery1.9-
$("#panel").find("div").live("click",function(){
  alert("x");
}).addClass("x");
 
//jQuery1.9+
$("#panel").on("click","div",function(){
  alert("x");
}).find("div").addClass("x");
 </span>