jQuery live（）已棄用：使用on for mouseenter和mouseout？

Question

我不知道如何可以用jQuery on()

$('.box').live({ 
     mouseenter: 
     function() { 
      $(this).children('.menu').stop(true, true).fadeIn(fadeIn); 
     }, 
     mouseleave: 
     function() { 
      $(this).children('.menu').stop(true, true).fadeOut(fadeOut); 
     } 
    }); 

任何想法改寫下面聽衆？

Answer 1

$(document).on('hover', '.box', function(e) { 
    if(e.type == 'mouseenter') { 
    $(this).children('.menu').stop(true, true).fadeIn(fadeIn); 
    } else { 
    $(this).children('.menu').stop(true, true).fadeOut(fadeOut); 
    } 
}); 

相反的document這將是更好地使用這不是動態的.box任何父元素。

閱讀關於.on()。

的.on()爲代表的事件（又名現場活動）語法是：

$(StaticParent).on(eventName, target, handlerFunction); 

Answer 2

對於確切.on相當於：

$(document).on({ 
    mouseenter: function() { 
     $(this).children('.menu').stop(true, true).fadeIn(fadeIn); 
    }, 
    mouseleave: function() { 
     $(this).children('.menu').stop(true, true).fadeOut(fadeOut); 
    } 
}, '.box'); 

雖然這裏的主要好處是，你不需要要使用document，您可以使用在頁面生命週期中保證存在的最接近的父代。