用 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);
});完。
參考資料：
http://www.zhidao91.com/jquery-on-no-effective/
本文出自 “細桶假狗屎” 博客，請務必保留此出處http://xitongjiagoushi.blog.51cto.com/9975742/1660706