jQuery實現DOM元素事件動態繫結

用 jQuery 為DOM元素繫結事件時，如果用下面這種方式：

<button class="dynamic-bind">按鈕一</button>$(function() {  $('.dynamic-bind').on('click', function(e) {    alert(e.type); //’click’});});

那麼如果在繫結事件之後透過 jQuery 新增與該選擇器相同的新的DOM元素：

$('.dynamic-bind:last').after('<buttonclass="dynamic-bind">按鈕二</button>');

則在瀏覽器中點選 按鈕二時，不會彈出 alert 提示，然而，透過 jQuery 新增DOM元素是十分常用的，這一問題必須要解決，通常來說有以下兩種方法。

 

1.將繫結事件封裝到方法中：

var dynamicBind = function($element, event) {  $element.on(event, function(e) {    alert(e.type);  });};

然後在每次用jQuery 新增DOM元素後呼叫該方法：

$('.dynamic-bind:last').after('<buttonclass="dynamic-bind">按鈕二</button>');dynamicBind($('.dynamic-bind:last'), 'click');

這樣做雖然解決了問題，但是每新增一次DOM元素都要呼叫一次繫結事件的方法，不僅容易亂而且太 low 。

 

2.使用jQuery的事件委派機制：

所謂 jQuery 的事件委派機制，可以簡單理解為jQuery 會自動為匹配的元素附加一個事件處理函式，即使這個元素是在委派宣告之後被新增的。這裡仍舊用 on 來委派事件，只是引數略有不同：

$(document).on('click', '.dynamic-bind', 'Hello', function(e) {  alert(e.data); //'Hello'});

這樣一來，無論之後用jQuery 新增多少個 <button class=”dynamic-bind”></button>，jQuery 都會自動為其繫結該 click 事件，問題得以完美解決。需要注意的是，這裡的‘Hello’ 引數不是必傳的，如果傳入則會賦值到 e.data ，這裡傳入只是為了對 event 物件做一下了解。

 

補充：

1.在早期的 jQuery 版本中，事件委派和解除委派使用的是 .live().die() .delegate() .undelegate() ，大約在 jQuery 1.9 之後的版本中這些方法都被取消，取而代之的是 .on() .off() 方法，如果在高版本的 jQuery 中使用 .live() 等方法會丟擲異常。

2.在事件委派時，並不一定只能使用 $(document).on(…); 方式，這裡的 $(document) 可以為任何被委派物件的父DOM元祖，如：

<div id="btn-father">  <button class="dynamic-bind">按鈕一</button></div>

則事件委派時也可以寫為：

$('#btn-father').on('click', '.dynamic-bind', 'Hello', function(e) {  alert(e.data);});

完。