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

• map

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

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