动态监听加载对象
当使用js或jQuery动态创建元素(例如append)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，因为传统的$('.selector').click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。
所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。
jQuery.on()
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
实例
$("#trashB").on('click', function() {
// 遍历废纸篓中的笔记
listNoteInBin();
})
function listNoteInBin() {
// 遍历废纸篓中的笔记
$.post("${pageContext.request.contextPath}/BinServlet?method=listNoteInBin", {}, function(data) {
$("#note-in-bin").html("");
$.each(data, function(i, obj) {
var li = "<li id=\"noteInBin"+obj.id+"\"><i class=\"icon-file filei\"></i><span>"+obj.title+"</span><i class=\"icon-trash trashi both\"></i><i class=\"icon-undo both\"></i></li>";
$("#note-in-bin").append(li);
});
}, 'json');
} 为trashB绑定一个点击事件，调用jQuery.post()方法向后端发出请求，获取返回数据data并在note-in-bin下动态创建li。
$(document).on('click', '.trashi', function() {
var noteInBinID = this.parentNode.id.slice(9);
alert(noteInBinID)
}); 使用jQuery.post()方法，为动态生成的li下的元素trashi添加点击事件，事件有效。使用如上方法，无论是初始加载还是动态加载的对象都能实时监听。