原地址 ：http://blog.cozof.com/pieces/19.shtml
早期對頁面上後期加載的動態元素,賦事件或值的時候,是使用live的. 由於效率比較低(其實數據不多也感覺不出來),後面使用delegate委託來代替了,再後面,1.7以後使用on 來代替delegate了. live,delegate在新版本中都還可以用. 它們在寫法上有差別,一段時間不寫容易混,寫下來備忘. 如點擊div裏的任意一個button時增加一個新button：
頁面：
|
1
2
3
|
<div
id="panel">
<input
type="button"
name="name"
value="clone"
class="btnAdd"
/></div> |
腳本:
1.1 使用live
jQuery版本1.3+
|
1
2
3
|
$('.btnAdd').live('click',
function () { $(this).clone().appendTo('#panel');}); |
1.2 直接把live改成on, 沒有給範圍比如#panel,這對頁面上一開始有的按鈕有效. 也就是說無法直接這樣代替live
|
1
2
3
|
$('.btnAdd').on('click',
function () { $(this).clone().appendTo('#panel');}); |
2.使用delegate 需要給它一個範圍才行，如#panel,讓它到裏面找.這樣可以實現live一樣的效果.
jQuery版本1.4.3+
|
1
2
3
|
$('#panel').delegate('.btnAdd',
'click', function
() { $(this).clone().appendTo('#panel');}); |
3.使用on 給它一個範圍才行，如#panel,讓它到裏面找. 這樣可以實現live和delegate一樣的效果.
裏面的'click', '.btnAdd'跟上面的delegate是相反的.只要記住on click是挨在一起的就行了.
jQuery版本1.7+
|
1
2
3
|
$('#panel').on('click',
'.btnAdd', function
() { $(this).clone().appendTo('#panel');}); |
原地址：http://www.cnblogs.com/piercalex/archive/2013/03/30/2990679.html
jQuery中.bind() .live() .delegate() .on()的區別
bind(type,[data],fn) 爲每個匹配元素的特定事件綁定事件處理函數
$("a").bind("click",function(){alert("ok");});
l
ive(type,[data],fn) 給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在選擇元素上綁定一個或多個事件的事件處理函數
差別：
.bind()是直接綁定在元素上
.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。和.bind()的優勢是支持動態數據。
.delegate()則是更精確的小範圍使用事件代理，性能優於.live()
.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機制
