好用的jQuery.live() 簡單範例說明

假設我要動態建立100個物件,每個物件都可以有Click事件,利用jQuery該怎做?


...答案是 jQuery.live()。

你可以自己測試一下,先連結到 minijquery ,分別拿下面的程式碼複製來測試。

這是JavaScript
$(function(){
for(var i=1;i<101;i++){
 $("#dd").append("<span class=ss id="+i+">"+i+"</span>");
}
$("#dd span").live("click",function(){
 $("#showID").html("我的ID是"+this.id);
});
});


這是CSS
#dd{border:solid 2px gray;}
.ss{margin:2px; background-color:green; display:inline-block; color:white; width:30px; text-align:center; cursor:pointer;}
#showID{color:red; font-size:40px;}

這是BodyHTML
<div id="dd"></div>
<div id="showID"></div>


結果如下圖顯示:


很神奇吧? jQuery.live() 減少了更多程式碼。
官網上這樣說明的:對於現在或"未來還沒產生"的元素當綁一個事件上,或是自訂的事件。(太神奇了,難道可以預知你要產生什麼元素??)

目前支援的事件有:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。還不支援 blur, focus, mouseenter, mouseleave, change, submit等事件。live()跟bind()不同在於它一次只能綁一個事件,除此之外還有下列的區分:
  1. 利用event delegation的原理,不須重綁事件(re-bound)就可以操作現在、及晚一點才會產生的元素(future element)的事件處理。
  2. live()不會依照傳統的模式冒泡,也不能用stopPropagatoni或是stopImmediatePropagation停止。例如:"li"與"li a"都有各自兩個不同的click事件,當點選內部的"li a",兩個事件都會trigger。
  3. live()只能用一個選擇器,例如:可以 $("li a").live(...) ,但不可以 $("a", someElement).live(...);這樣也不行$("a").parent().live(...).
  4. 若要移除live(),就要用die()
  5. 只有1.3.2版才有支援完整效能。

神奇的live()與相關Event Delegatio觀念請參考jQuery.live()與Event Delegation 說明。