聊一聊事件委托

今天想使用点击事件绑定动态获取的元素，但又不想将事件注册在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(){

})

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