jquery為動態添加元素添加事件

以前我們定義事件,比如為元素定義單擊事件是這樣寫的:

代碼如下:

$('input').click(function () {
//處理代碼
});
 

代碼如下:

$('.clickme').bind('click', function() {
// Bound handler called.
});
 

但是這隻能是對已經加載好的元素定義事件,那些後來添加插入的元素則需要另行綁定。即使你使用jquery的clone函數,它並不能將事件也復制(到目前為止我還不清楚它是為什麼這樣定義,是沒法復制還是刻意這麼處理,以防止出現某些異常,這還有待去分析一下jquery的源代碼)。
現在,使用live你可以輕松搞定,

$('.clickme').live('click', function() { // Live handler called. });這樣,你即使在後面動態插入的元素,也會被綁定事件,$('body').append('<p class="clickme">Another target</p>');
定義和用法
live() 方法為被選元素附加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。

通過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及未來的元素(比如由腳本創建的新元素)。

 

問題:使用jQuery的live()方法綁定事件,有時會出現重復綁定的情況,如,當點擊一個按鈕時,此按鈕所綁定的事件會並執行n遍。

解決:使用die()方法,在live()方法綁定前,將此元素上的前面被綁定的事件統統解除,然後再通過live()方法綁定新的事件。

 

Js代碼
//先通過die()方法解除,再通過live()綁定
$("#selectAll").die().live("click",function(){
//事件運行代碼
});
//先通過die()方法解除,再通過live()綁定
$("#selectAll").die().live("click",function(){
  //事件運行代碼
 });die()方法簡介:

 

Js代碼
die([type], [fn])<SPAN style="WHITE-SPACE: normal"> </SPAN>

die([type], [fn])

概述
jQuery 1.3新增。此方法與live正好完全相反。

如果不帶參數,則所有綁定的live事件都會被移除。

你可以解除用live註冊的自定義事件。

如果提供瞭type參數,那麼會移除對應的live事件。

如果也指定瞭第二個參數function,則隻移出指定的事件處理函數。

 

作者:zongquanliu

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *