javascript - 将与选择器相关的变量传递给多个 jQuery 事件

Question

我正在寻找一种方法来将与元素相关的变量传递给 mouseenter 和 mouseleave 事件。例如，如果我有:

jQuery('.element').on({
    mouseenter: function () {
        var $child = jQuery(this).find('.child');
        $child.fadeIn();
    },
    mouseleave: function () {
        var $child = jQuery(this).find('.child');
        $child.fadeOut();
    }    
});

有没有办法避免两次定义 $child 变量？我能够使用 .hover() 解决这个问题，但是我现在无法使用它，因为我在动态生成的元素上调用它，而 .hover() 将不起作用。

Answer 1

您可以使用这种方式来委托(delegate)这两个事件:

jQuery(document).on("mouseenter mouseleave", ".element", function(e){
    jQuery(this).find('.child').fadeToggle();
    // you can check for e.type for more complex logic    
});

委托(delegate)不同处理程序的语法是:

jQuery(document).on({
    mouseenter: function () {
        //...
    },
    mouseleave: function () {
        //...
    }    
}, ".element");