hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

个人博客：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

背景：

本人在维护博客的时候加入了aplayer（一个音乐插件），效果如图



可是效果不太美观，为了优化一下想做成这个样子：鼠标移入出现背景图，点击全部展开，希望在点击按钮上加click函数，达到修改div的left值来实现



这个时候出现问题了，在电脑端实现没有问题的，可是在移动端会出现点击点击事件没有绑定成功

代码：

define(function () {
    aplaer();
    function aplaer() {
      //falsedakai  false表示没点击打开

      //falsechuxian false表示没有把鼠标移入
      var flag_music = false
      flagchuxian=false;
      $(".aplayer-body").mouseenter(function () {
        if (flagchuxian==false&&flag_music==false){
          $(".aplayer-body").css({"left":"0px"})
          flagchuxian=true;
          flag_music==false;
        }
      })

      $(".aplayer-body").mouseleave(function () {
        if (flagchuxian==true&&flag_music==false) {
          $(".aplayer-body").css({"left": "-66px"})
          flagchuxian=false;
          flag_music=false;
        }
      })

    $(".aplayer-icon:last").on("click",function () {
        if (flag_music==false) {
          $(".aplayer-body").css({"left": "0px"})
          flag_music=true;
        }else {
          $(".aplayer-body").css({"left": "-66px"})
          flag_music=false;
        }
      })
    }

})

分析

通过打断点调试，查看源码等均未发现结果，苦恼了好久，好吧这一行你白看了。

解决问题

通过google查看相关的问题，博文连接：https://www.cnblogs.com/momozjm/p/6098377.html

大概意思就是将click事件中的.click写成on(“click”,function)的形式，试了试，成功了，趁热打铁，追着问题不放，看下面

2018.12.20更新

今天又发现还是不行，主要是手机不断的刷新，每次都重新的绑定事件，通过阅读博文：https://www.jianshu.com/p/2e1edb42f429 ，

得知，除了动态的添加需要on来绑定事件外，还涉及到如果绑定了时间之后删除了绑定的元素，然后再添加上，再添加的时候还是没有绑定上的。通过body.delegate来帮顶，另外必须在document加载完了之后再绑定这个函数

最后的代码是：

define(function () {
  function aplayer() {
  var flag_music=false;
      $(document.body).delegate('.aplayer-icon:last','click',function(){
        if (flag_music==false) {
          $(".aplayer-body").css({"left": "0px"})
          flag_music=true;
        }else {
          $(".aplayer-body").css({"left": "-66px"})
          flag_music=false;
        }  });
    }
  $(function(){
    aplayer()
  })
})

引申的知识

参考博文：https://blog.csdn.net/hesterrocks/article/details/64442442 后

总结：click只能绑定静态的元素，on（“click”，funciotn）能够绑定动态的元素。

写给读者的话

本人才疏学浅，如果文章中有错误的地方，（包括错别字），还希望指出，大家共同进步~