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

版权声明：本文为作者原创，转载请注明出处，联系qq：32248827 https://blog.csdn.net/dataiyangu/article/details/85042193

背景：

本人在维护博客的时候加入了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)的形式，试了试，成功了，趁热打铁，追着问题不放，看下面

引申的知识

参考博文：https://blog.csdn.net/hesterrocks/article/details/64442442 后
总结：click只能绑定静态的元素，on（“click”，funciotn）能够绑定动态的元素。

结合本文的背景，得到的真正的原因所在

因为aplayer插件并不是我写的，引用的别人的css和js，这些div都是插件的js中动态生成的，结合上面的知识点，click事件是不能绑定动态的元素的，所以click事件并没有真正的绑定上，完结。

写给读者的话

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