Question

我想使用实时方法使用悬停功能，但它不能正常工作，我使用mouseenter和mouseout但是当我快速移动鼠标时，mouseout事件无法正常工作，这就是为什么我要使用实时悬停。这是示例code

<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并且你需要fire事件时，就像我一样委托那个元素。

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

Working Fiddle

Answer 3

使用.on()方法，因为不推荐使用.live()，并使用委派语法

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

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

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

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

在jquery中使用live方法悬停功能

3 个答案: