好用的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 說明。