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

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; }

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

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

来源：博客园

作者：lujialin666

链接：https://www.cnblogs.com/lujialin/p/11453337.html

标签

动态绑定