淺談jQuery中事情的動態綁定

在jQuery的開發過程中，我們往往需要處理各種事件，例如click()，hover()等。在jQuery的API中，我們可以使用不同的方法來將這些事件綁定到特定的元素中。今天這篇文章中，我們將要介紹如何使用bind()，on()，live()和delegate()方法來綁定特定的事件，什么情況下使用，什么情況下不適用它們。希望能夠幫助大家更好的了解和使用jQuery的時間處理方法。

一、bind()方法

使用較早版本jQuery的教程或者應用中，我們往往使用bind()方法來將事件綁定到特定的元素上，如下：

<section id="container">
 <img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>
$('.scv').bind('click', function(){
  $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

如果你查看相關jQuery1.7.1最新文檔的話，大家應該知道最新的jQuery中bind目前其實最后也是調用on()方法來實現的，所以呢，如果現在大家使用最新jQuery版本（目前為1.7.1）的話，盡量避免使用bind()方法。

如果大家點擊運行這個示例肯定會發現，當點擊第一個圖片時，會生成新的圖片，但是如果你點擊新生成的圖片，不會繼續執行添加新圖片的操作。為什么會這樣呢？ 因為使用bind綁定的元素是頁面上所有存在的class="scv"的元素，新生成的元素添加到DOM，并沒有綁定我們添加的click方法。那么怎么讓新的圖片也可以綁定我們click方法呢。我們可以使用clone()方法，如下：

$('.scv').bind('click', function(){
 $(this).clone(true).appendTo('#container');
});

我們這里使用clone方法來生成一個新的圖片，并且添加到#container容器中。這里我們使用clone方法參數true，代表克隆的元素同時克隆綁定的方法。

二、live()方法

在老的jQuery版本中，我們有一個方法專門用來處理動態生成的元素的事件綁定-live()，使用live()方法可以將方法綁定的效果應用到已存在或者新創建的DOM元素。代碼如下：

$('.scv').live('click', function(){
 $(this).clone().appendTo('#container');
});

live()調用過程如下：

我們首先將click方法綁定到了Document，然后，查找Document里是否有.scv這個元素。這個過程對于性能來說可能比較浪費，所以我們可以使用如下帶參數方法優化方式：

$('.scv', '#container').live('click', function(){
 $(this).clone().appendTo('#container');
});

以上代碼中我們使用#container作為綁定的上下文，jQuery將會在#container這個元素中查詢.scv元素。

三、Delegate()方法

在最新的jQuery版本中，我們最好不要使用live()方法，因為它已經被放棄了，這里我們使用delegate方法來指定事件綁定的上下文，如下：

$('#container').delegate('.scv','click', function(){
  $(this).clone().appendTo('#container');
});

大家可以看到以上代碼中，我們首先設定了方法綁定的上下文-#container，然后，尋找class為.scv的元素，再綁定click方法。

注意：這里克隆后添加到的元素應該是你定義的上下文，否則，新生成的圖片綁定不上click方法。

四、on()方法

.on( events [, selector ] [, data ], handler(eventObject) )

這是jQuery官方給出的Api，其實在最新版本的jQuery類庫中，所有以上方法在后面其實都是調用on()方法，所以，如果你開發最新版本的jQuery，完全可以使用on()方法來處理所有的事件綁定，避免過多的方法調用。如下：

$('.scv').on('click', function(){
  $(this).clone(true).appendTo('#container');

});

如果要保證你動態添加的東西可以綁定上handler，那么$("selector").on()中的selector應該是更高的級別，父div，body或者document等。

五、總結

總的來說，最新的jQuery版本中，所有的方法基本最后都使用on()方法來處理，如果你針對新版本的jQuery做開發，大家可以考慮使用delegate()和on()方法處理事件綁定，雖然以前方法也可以用，但是大都都已經退出歷史舞臺。

以上這篇淺談jQuery中事情的動態綁定就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。