用on给动态添加的元素绑定hover事件，没有生效的解决

Posted 2020-08-21 嘴角UP扬

1.需求：经常要动态加载dom节点，加载之后的节点当然也会有一些绑定事件的需求，今天给一个事件绑定hover,用jQuery，竟然没有生效。先上没有生效的代码 

$(‘ul.course_lists‘).on(‘hover‘,‘li‘,function(){ 
      // mouseenter dosomething 
},function(){
      // mouseleave dosomething
});

2.问题出在哪里了？

• on函数传的参数不对？查查文档呗，我看或不看他，他都在那里，我看他，或许可以帮助我解决问题，我不看他，依旧稀里糊涂
• 先看语法

$(selector).on(event,childSelector,data,function,map)　

• 很明显了，在传递到里面的参数中，只看到可以传一个function，而我传了两个函数

 3.分析

　　在JQuery中，hover()函数本身是对 mouseenter && mouseleave 的封装，然而在原生event中，并没有hover这一事件，所以在传递参数hover时，并不会有任何的效果。

　　如果我想绑定类似hover的效果，可以绑定两个事件mouseenter && mouseleave + 一个function ,样式就用类名来toggle,也可以在map里面，一个事件对应一个function

 4.代码来了

• 　　绑定两个事件

 
// js
$(‘ul.course_lists‘).on(‘mouseenter mouseleave‘,‘li‘,function(){ 
      $(this).toogleClass(‘border_color‘);
});

// css
.border_color{
    border-color:#ccc;    
}

li{
  border:1px solid #fff;
}

• map

$(‘ul.course_lists li‘).on({
    mouseenter:function(){
        $(this).css(‘border-color‘,‘#ccc‘);
    },
    mouseleave:function(){
        $(this).css(‘border-color‘,‘#fff‘);    
    }
});

5.搞定，but,on()方法不要再出错了！