jQuery live（）已棄用：使用on進行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);
  }
});

最好使用非動態的.box父元素來代替document 。

了解有關.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 ，但是您可以使用保證在頁面生命周期內存在的最接近的父級。