1.需求:经常要动态加载dom节点 , 加载之后的节点当然也会有一些绑定事件的需求 , 今天给一个事件绑定hover,用 , 竟然没有生效 。先上没有生效的代码
$('ul.course_lists').on('hover','li',function(){ // mouseenter dosomething },function(){// mouseleave dosomething});
2.问题出在哪里了?
$(selector).on(event,childSelector,data,function,map)
3.分析
文章插图
在中 , hover()函数本身是对&&的封装 , 然而在原生event中 , 并没有hover这一事件 , 所以在传递参数hover时 , 并不会有任何的效果 。
【用on给动态添加的元素绑定hover事件,没有生效的解决】如果我想绑定类似hover的效果 , 可以绑定两个事件 &&+ 一个 ,样式就用类名来,也可以在map里面 , 一个事件对应一个
4.代码来了
// js$('ul.course_lists').on('mouseenter mouseleave','li',function(){ $(this).toggleClass('border_color');});// css.border_color{border-color:#ccc;}li{border:1px solid #fff;}
文章插图
$('ul.course_lists li').on({mouseenter:function(){$(this).css('border-color','#ccc');},mouseleave:function(){$(this).css('border-color','#fff');}});
5.搞定 , but,on()方法不要再出错了!
- 三 用Abp实现短信验证码免密登录:Vue网页端开发
- 如何给shadow DOM下的元素添加样式
- 使用Yeoman实现vue项目结构创建
- ionic 初级开发手机端移动应用视频课程-陶国荣-专题视频课程
- 使用:hover和onmouseover的响应事件
- 很有用的AngularJS 介绍
- 适用本科生 web前端开发学习线路图2019版
- vue-antd-admin管理后台使用教程
- 玉米除草剂打后几小时不下雨就管用
- 秦始皇马车上的那把伞到底有什么作用?