版权声明:本文为作者原创,转载请注明出处,联系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事件并没有真正的绑定上,完结。
写给读者的话
本人才疏学浅,如果文章中有错误的地方,(包括错别字),还希望指出,大家共同进步~