如何在jQuery中正確執行功能

Question

我難以獲得一個jQuery函數來表現我想要的。 我相信懸停處理程序已被多次注冊，導致其反復觸發，但是我不確定如何正確執行。 任何幫助將不勝感激。

function hoverOptions(target)
{
 var option = target.children('.option');
 var tooltip = option.children('.tooltip');

 option
 .fadeToggle(150, function() { console.log('option'); })
 .hover(function() { console.log('tooltip'); });
};

$(document).on('hover', '#myElement', function()                
{      
 $(hoverOptions($(this)));
});

Answer 1

我認為您正在兩次注冊此活動。

function hoverOptions(target)
{
 var option = target.children('.option');
 var tooltip = option.children('.tooltip');

 option
 .fadeToggle(150, function() {console.log('option');)} 
 .hover(function(){console.log('tooltip')});
};

$(document).on('hover', '#myElement', function()                
{
     hoverOptions($(this));
};

如果要在jQuery名稱空間中聲明方法：

$.hoverOptions = function(target){ //Your code }

Answer 2

當您似乎要調用懸停事件時，您正在注冊它們。

另外，您僅將事件委派給一個元素。 在事件中涉及許多元素的情況下，事件委托才是真正的好主意。

尚不清楚您想要什么，但是我對此有所猜測（請注意簡化的代碼）。

//on hover to #myElement, fade toggle the .option child
$('#myElement').on('hover', function() {;
    $(this).children('.option').fadeToggle(150, function() {
        console.log('option');
    });
});

//on hover to .option elements, toggle the .tooltip child
$('.option').hover(function() { $(this).children('.tooltip').toggle(); });