聊一聊事件委托

今天想使用点击事件绑定动态获取的元素，但又不想将事件注册在post成功函数体内。

事件委托，顾名思义就是讲子元素事件委托给上级元素
（这是写上级元素，包含document根元素，因为不局限于它的父元素）

先说一下为什么动态获取的元素直接绑定不可以：

  因为动态元素是后生成的，在事件注册的时候，它还没有生成，一般
我们是通过：
$.post(url,function(data){
    //这里拿到data，然后去插入节点，生成元素
    //如果我们要在这里注册事件，当然没问题，直接绑定即可，
    //因为现在元素已经生成了
})

很不幸，基于业务的复杂性，必须要将改事件抽出来，注册到全局（因为要做多一层缓存）

既然要在元素未生成前，注册事件，那么将该事件绑定给上级元素：
$(documnet).on('click','要绑定的事件元素', function(){
    // to do
})

说一下为什么要这样做：

我在做一个优惠券功能，优惠券有使用和未使用的区别，那么就有这样一个需求：
点击使用：去请求使用的；
点击未使用：去请求未使用的；

我不可能每点击一次都去请求一次吧，我希望我请求过了的数据，就不希望它再请求了

这里就要加一个缓存给它，设两个变量，分别保存使用和未使用的，
点击它的时候，只要对应的变量不为空，就直接渲染，为空就去请求
    var willData, doneData, state;
function session(){
    //state是用来判断点击的是已使用还是未使用的，忽略即可
  if(state == 0) {
    if(willData) {
      $('#coupon-box').append(willData)
    } else {
      $.post(url,function(){
          $('绑定事件元素').on(function(){})
      })
    }
  } else {
    if(doneData) {
      $('#coupon-box').append(doneData)
    } else {
      $.post(url,function(){
          $('绑定事件元素').on(function(){})
      })
    }
  }
}

写完逻辑后，（如果是在post函数体注册的事件）就会发现一个很奇怪的问题

当激活缓存，去插入元素时，发现点击事件失效了；
因为我是通过移除remove（）和append（）再插入去切换使用和未使用的，
所以已经通过post绑定的元素，被我移除了，通过session去插入的元素并
没有注册点击事件，当然我们也可以在给它注册一次，毕竟要提高代码重用
所以这里用了事件委托：
$('上级元素').on('click','绑定元素',function(){

})

=====本文到此结束，代码比较少，最重要的是思路，对于刚入门的小伙伴可以看一看哈！