jQuery .bind() 和 .live() 重複綁定的解法 ~ on() 和 delegate()

jQuery 可以幫我們動態生成很多的 DOM 出來,但是由於生成後原先指定該物件動作的指令不會被重複執行,所以我們做出來的 DOM 內容並不會有動作產生。

這時候,我們通常都會使用 bind() 函式,或是 llive() 函式來進行重新綁定的動作,由於 live() 會偵測整個 Document 的動作,當頁面中有大量不相關的 DOM 時,會導致動作延緩。所以在 1.7 之後已經被拋棄。

而這兩個函式都有一個共同的問題,就是當我們不斷產生新的 DOM 時,會不斷的重複榜定函式,這絕對不會是我們要的。看下面:


在網路上面找了很多解法,有些說可以用 unbind() 解決,也有說用 die() 解決。我自己試是都無效。雖然很多人都說可以用。

後來找到了更簡單的作法,不用像 bind() 一樣每次都要 bind() 可以一開始寫完之後動態產生的都套用,類似 live() 但是又不會像 live() 是由 Document 階層開始讀取。


on() 和 delegate()

其實這兩個函式我自己還沒找到差別在哪?不過如果你是用 1.7.1 之後的版本建議你可以用 on()
這個函式了。

先來講一下差異
delegate() 支援 1.4以上的版本,on() 到了 1.7.1 之後裁開始支援

delegate 的用法
$(document).delegate(selector, events, data, handler);

on 的用法
$(document).on(events, selector, data, handler);

發現兩個哪邊不同了嗎?參數互換而已。所以我挑一個做解釋就好了。既然 on 是後期版本的我們就介紹 on 吧!

$("父節點").on("事件","子節點",[如果有的話~回傳值],"動作");

因為他可以指定父節點,所以他就不用像是 live() 一樣由 document 開始巡邏,這樣省掉很多資源。
接下來事件的部份可以指定多個,只要用空白鍵分開例如: click hover 這樣,話不多說,直接看範例。



發現了嗎?用 on 下去寫只需要一開始的時候告訴頁面 class=item 的通通都要讓他點下去以後 alert('hi') 這樣不管後面動態怎麼產生,都會被自動綁定應該要有的動作。

重要的是,絕對不會發生重複綁定的問題。

留言