一、动态监听加载对象
当使用js或jQuery动态创建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，因为传统的$('.selector').click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。
所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。
二、jQuery.on()用法
1、定义和用法
（1）on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
（2）自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
（3）注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
（4）提示：如需移除事件处理程序，请使用 off() 方法。
（5）提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
2、语法
$(selector).on(event,childSelector,data,function)
三、事件绑定方式执行顺序：html属性 > dom元素（onclick方法）
先看例子1
点击这个段落。
输出结果：
7、段落被点击了。说明：4和6绑定的点击事件被7的事件覆盖。
分析：
（1）不同绑定事件方式的执行顺序：html属性 > dom元素属性
（2）同一种绑定事件方式顺序：写在前面 > 写在后面
说明：实际项目中，jq和原生js不要混着用。
四、事件绑定方式执行顺序：html属性 > dom元素（onclick方法） > DOM level 2 事件
我们看个栗子
点击这个段落。
输出结果：
7、段落被点击了。
1、段落被点击了。
2、段落被点击了。
3、段落被点击了。
5、段落被点击了。
8、段落被点击了。
9、段落被点击了。说明：通过addEventListener方式绑定事件（jq的on方法，js的click方法）是可以绑定多个事件。
分析：
（1）不同的绑定方式执行顺序：html属性 > dom元素（DOM level 0 事件） > DOM level 2 事件。
（2）DOM level 2 事件中：谁先绑定谁先执行。
（3）jq的on，js的click，addEventListener，可以绑定多个事件。
说明：实际项目中，jq和原生js不要混着用。
五、动态绑定：jq的on方法+html的属性onclick方法
实用jq或者原生js创建元素（比如：append，appendChild，insertBefoe等），实用on(event, fun)或者addEventListener等传统的监听事件，事件不会触发。原因：不能这些方法只能监听到html初始化的对象，后续动态添加的方法需要寻找其他绑定方法。jq的on()方法+html的属性onclick方法。
我们发现，点击删除的时候，输出
5、删除按钮。
4、删除按钮。
说明：
1、执行顺序：html的属性绑定比jq的on方法快。（html属性绑定>DOM level 2 事件）
2、动态绑定事件方法：（1）jq的on方法；（2）html的属性绑定。
说明：实际项目中，jq和原生js不要混着用。
六、总结
上面例子的jq是1.10的版本。
1、事件的绑定方法：（1）html属性绑定（比如：onclick），（2）dom元素属性（比如onclick），也叫DOM level 0 事件，（3）原生的addEventListener和jq的on和jq的click（DOM level 2 事件）。
2、绑定方法的执行顺序：html属性 > dom元素属性 > DOM level 2 事件
3、同一种绑定事件方式顺序：写在前面 > 写在后面。
4、html属性和dom元素属性绑定方法最终只有最后一个事件会执行。