用 jQuery 為DOM元素綁定事件時,如果用下面這種方式:
專注于為中小企業(yè)提供網站設計制作、網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)肥鄉(xiāng)免費做網站提供優(yōu)質的服務。我們立足成都,凝聚了一批互聯(lián)網行業(yè)人才,有力地推動了上1000家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。
$(function() { $('.dynamic-bind').on('click', function(e) { alert(e.type); //’click’ }); });
那么如果在綁定事件之后通過 jQuery 添加與該選擇器相同的新的DOM元素:
$('.dynamic-bind:last').after('按鈕二');
則在瀏覽器中點擊 按鈕二時,不會彈出 alert 提示,然而,通過 jQuery 添加DOM元素是十分常用的,這一問題必須要解決,通常來說有以下兩種方法。
1.將綁定事件封裝到方法中:
var dynamicBind = function($element, event) { $element.on(event, function(e) { alert(e.type); }); };
然后在每次用jQuery 添加DOM元素后調用該方法:
$('.dynamic-bind:last').after('按鈕二'); dynamicBind($('.dynamic-bind:last'), 'click');
這樣做雖然解決了問題,但是每添加一次DOM元素都要調用一次綁定事件的方法,不僅容易亂而且太 low 。
2.使用jQuery的事件委派機制:
所謂 jQuery 的事件委派機制,可以簡單理解為jQuery 會自動為匹配的元素附加一個事件處理函數(shù),即使這個元素是在委派聲明之后被添加的。這里仍舊用 on 來委派事件,只是參數(shù)略有不同:
$(document).on('click', '.dynamic-bind', 'Hello', function(e) { alert(e.data); //'Hello' });
這樣一來,無論之后用jQuery 添加多少個 ,jQuery 都會自動為其綁定該 click 事件,問題得以完美解決。需要注意的是,這里的‘Hello’ 參數(shù)不是必傳的,如果傳入則會賦值到 e.data ,這里傳入只是為了對 event 對象做一下了解。
補充:
1.在早期的 jQuery 版本中,事件委派和解除委派使用的是 .live().die() .delegate() .undelegate() ,大約在 jQuery 1.9 之后的版本中這些方法都被取消,取而代之的是 .on() .off() 方法,如果在高版本的 jQuery 中使用 .live() 等方法會拋出異常。
2.在事件委派時,并不一定只能使用 $(document).on(…); 方式,這里的 $(document) 可以為任何被委派對象的父DOM元祖,如:
則事件委派時也可以寫為:
$('#btn-father').on('click', '.dynamic-bind', 'Hello', function(e) { alert(e.data); });
完。
參考資料:
http://www.zhidao91.com/jquery-on-no-effective/