Question

我有一些使用PHP动态创建的元素。我希望用户将鼠标悬停在图标上，并显示相应的元素。当鼠标离开图标时，我想要一个计时器启动，然后隐藏该元素。如果鼠标进入显示的元素，我想清除计时器。当鼠标离开该元素时，我希望计时器重新开始。

我很难搞清楚这一点，我无法弄清楚为什么计时器不会清除。下面的所有jQuery都在document.ready。

之内

的jQuery

var $infoIcon = $('.fa-info-circle');
var $trackListing = $('track-listing');
var timer;

// Show listing on hover
$infoIcon.on('mouseenter', function(){
    $(this).next('.track-listing').fadeIn();
    clearTimeout(timer);

// Start timer when exiting the info icon
}).on('mouseleave', function(){
    timer = setTimeout(function(){
        $('.track-listing').fadeOut();
    }, 2000);
});

// Kill timer when entering listing box
$trackListing.on('mouseenter', function(){
    clearTimeout(timer);

// Start timer when leaving listing box    
}).on('mouseleave', function(){
    timer = setTimeout(function(){
        $('.track-listing').fadeOut();
    }, 2000);
});

如果您需要PHP，请告诉我。另外，我尝试将var timer;放在document.ready之外作为全局变量，我得到相同的结果。

Answer 1

如果在页面加载后插入元素，请尝试将它们绑定为：

$(document).on(event, '.selector', function(){});

delegates event。{/ p>

Answer 2

尝试使用两个不同的计时器。一个用于$trackListing，另一个用于$infoIcon

清除JS中的计时器的问题

2 个答案: