jquery - jquery中带有live方法的悬停功能

Question

我想在 live 方法中使用悬停功能，但它不能完美运行，我使用 mouseenter 和 mouseout，但是当我更快地移动鼠标时，mouseout 事件无法正常工作，这就是为什么我想在 live 中使用悬停。这是示例代码

<a href="#" class="add">add Class</a><br>
<br>
<a href="#" id="me">hover me</a>    


$('.add').click(function(){
    $('#me').addClass('abc')
    })
    $('.abc').live('hover',  function () {
    alert(0)
    }, function (){
    alert(1)
    })

Answer 1

jQuery 1.4.1 和更高版本支持"hover"事件live()，但只有一个事件处理函数：

$(".abc").live("hover",
        function()
        {

        }
    );

或者，您可以提供两个函数，一个用于 mouseenter，一个用于 mouseleave：

$(".abc").live({
        mouseenter:
           function()
           {
            alert(0);
           },
        mouseleave:
           function()
           {
            alert(1);
           }
       }
    );

Answer 2

jQuery 不再支持.live()使用.on()。当您动态添加元素或向它们添加类或 id 并且您需要在它们上触发事件时，然后像我一样委托该元素。

$('.add').click(function(){
$('#me').addClass('abc');
});
$(document).on('mouseenter', '.abc', function () {
    $(this).css({ "color" : "red" });
}).on('mouseleave', '.abc',  function () {
    $(this).css({ "color": "black" });
});​

工作小提琴

Answer 3

使用.on()方法 since.live()已被弃用，并使用委托语法

$('.add').click(function() {
    $('#me').addClass('abc')
})

$(document).on('mouseenter','.abc', function() {
    console.log('0');
}).on('mouseleave','.abc', function() {
    console.log('1');
})

请注意，document不建议使用 with on，因为它模仿了.live功能。.abc最好在 DOM 中使用更接近它的持久父级..

演示在 http://jsfiddle.net/gaby/BCPeZ/3/