jquery 給動態添加元素 實現點擊事件

當咱們試圖綁定一些事件到DOM元素上的時候，一般會使用如下的四個方法
bind(),on(),live(),delegate()你們應該用的較多的是前兩種方法。下面是我對四種方法的理解：

• Bind()： .bind()是最直接的綁定方法，會綁定指定函數和事件到DOM上，這種方法很好的解決了瀏覽器在事件處理中的兼容問題，但這個方法還有一些問題。代碼：

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

上面的兩行代碼完成的任務都是同樣的，就是把event handler 加到所有匹配的a元素上。這裏存在着一些效率方面的問題，一方面，咱們隠式地吧點擊事件加到了全部的a標籤上，這個過程是昂貴的；另外一方面在執行的時候也是一種浪費，由於他們都是作了同一件事卻執行了不少次（咱們能夠把它們hook到它們的父元素，經過冒泡能夠對它們中的每個進行區分，而後在執行這個event handle）。
優勢

• 這個方法提供了一種在各類瀏覽器之間對事件處理的兼容性解決方案
• 很是方便的綁定事件到元素上
• .click(), .hover()...這些很是方便的時間綁定，都是bind的一種簡化處理方式
• 對於利用ID選出來的元素是很是好的，不只僅是很快的能夠hook上去（頁面只能有一個id），並且當事件發生時，handler能夠當即被執行（至關於後面的live，delegate）實現方式

缺點

• 它會綁定事件到全部被篩選出來的元素上
• 它不會綁定到在它執行完成後動態添加的那些元素上
• 當被篩選出來的元素不少時，會出現效率問題
• 當頁面加載完成的時候，才能夠進行bind()，因此可能產生效率問題。

---

.live()
.live()方法用到了事件委託的概念來處理事件的綁定。它和用.bind()來綁定事件是同樣的。.live()方法會綁定相應的事件到你所選擇的元素的根元素上，便是document元素上。那麼全部經過冒泡上來的事件均可以用這個相同的handler來處理了。它的處理機制是這樣的，一旦事件冒泡到document上，jQuery將會查找selector/event metadata,而後決定那個handler應該被調用。不過在最新的jquery版本中好像被刪掉了。

$( "#members li a" ).live( "click", function( e ) {} );

優勢：

• 這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定
• 那些動態添加的elemtns依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上
• 你能夠在document ready以前就能夠綁定那些須要的事件

缺點：

• 從1.7開始已經不被推薦了，因此你也要開始逐步淘汰它了。
• Chaining沒有被正確的支持
• 當使用event.stopPropagation()是沒用的，由於都要到達document
• 由於全部的selector/event都被綁定到document,
  因此當咱們使用matchSelector方法來選出那個事件被調用時，會很是慢
• 當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

---

.Delegate()
.delegate()有點像.live(),不一樣於.live()的地方在於，它不會把全部的event所有綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在於都是用event delegation.推薦使用.delegate() 代替.live()

$( "#members" ).delegate( "li a", "click", function( e ) {} );

優勢：

• 你能夠選擇你把這個事件放到那個元素上了 chaining被正確的支持了
• jQuery仍然須要迭代查找全部的selector/eventdata來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素。
• 能夠用在動態添加的元素上

缺點：

• 須要查找那個那個元素上發生了那個事件了，儘管比document少不少了，不過，你仍是得浪費時間來查找。

---

.On()
其實.bind(), .live(), .delegate()都是經過.on()來實現的，.unbind(), .die(), .undelegate(),也是同樣的都是經過.off()來實現的，這是1.8.2的源碼：

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

優勢：

• 提供了一種統一綁定事件的方法
• 仍然提供了.delegate()的優勢，固然若是須要你也能夠直接用.bind()

缺點：

• 也許會對你產生一些困擾，由於它隱藏了一前面咱們所介紹的三種方法的細節。

結論：

• 用.bind()的代價是很是大的，它會把相同的一個事件處理程序hook到全部匹配的DOM元素上
• 不要再用.live()了，它已經再也不被推薦了，並且還有許多問題
• .delegate()會提供很好的方法來提升效率，同時咱們能夠添加一事件處理方法到動態添加的元素上。
• 咱們能夠用.on()來代替上述的3種方法

參考資料：https://www.cnblogs.com/moonr...
http://www.alfajango.com/blog...