聊一聊事宜托付

本日想运用点击事宜绑定动态猎取的元素,但又不想将事宜注册在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(){

})

=====本文到此结束,代码比较少,最主要的是思绪,关于刚入门的小伙伴能够看一看哈!

    原文作者:绯色琉璃
    原文地址: https://segmentfault.com/a/1190000013188193
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞