用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()方法不要再出錯了！