JavaScript动态绑定（向后绑定）

问题描述：

假设我们的网页中动态生成了一个按钮，在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件，但是问题是绑定的事件并没有生效（JavaScript中为元素绑定的事件失效）

分析

1.首先我们来看一下这个按钮是怎么回事：

问题中按钮有一个很关键的特性：动态生成，也就是说是在网页加载完成之后执行某些操作才产生的，它一开始是不存在的；

2.然后我们来分析一下事件的绑定

对于动态生成的元素，它不同于一般的网页既有元素，它的事件绑定不能通过普通的事件绑定实现。

3.关于JavaScript事件绑定的小解（针对本题盗图解析）

由图中我们可以看到事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document

事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）

然后我们进入dom事件流

DOM2级事件规定事件包括三个阶段：

① 事件捕获阶段

② 处于目标阶段

③ 事件冒泡阶段

我们分析一下第一阶段就可以知道为什么了，js中一般事件绑定是在网页生成的时候针对具体元素去绑定的，那么请问：网页初始生成时按钮存在吗？答：NOP。这就是为什么事件没有绑定上去，因为都没找到元素啊啊啊啊啊，绑个毛线

解决方法（jQuery on方法）

通过将事件绑定到存在的父元素上让子元素的事件有效

jQuery on用法格式：

$(selector).on(event,childSelector,data,function,map)

示例，比如说id为btn的元素为动态生成，它的父元素为btnParent(必须是网页加载时就有的元素，也可以直接绑定到body上去)那么我们可以这样为它绑定处理事件

$("#btnParent").on("click","#btn",