用 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/