jquery：爲什麼如果我在其他內部有一個jQuery觸發器，第二次發生多次觸發？

Question

我有下面的代碼，使切換垂直下拉。當我在'ul> li> a'中做了多次mouseenter並且在選擇de子菜單並且進入它之後，第二個觸發器多次觸發時，問題就會發生。

$('nav > ul > li > a').on('mouseenter',function(e){ 
    var currentID = this; 
    var index = $('ul.topnav > li > a').index(this); 
    $(this).addClass('selected'); 
    $('nav ul ul').css('margin-top',(38*parseInt(index))); 

    $(this).parent().find('ul').on('mouseenter',function(e){ 
     //fire several times 
     console.log('hover');   
     $(currentID).addClass('selected'); 
    }).on('mouseleave',function(e){ 
     $(currentID).removeClass('selected'); 
     //fire several times 
     console.log('end hover'); 
    }); 

}).on('mouseleave',function(e){ 
    $(this).removeClass('selected'); 
); 

Answer 1

您結合蛋白g每次你將鼠標懸停在nav > ul > li > a的子元素上。

試試這個：

$('nav > ul > li > a').each(function(e){ 

    $(this).on('mouseenter',function(e){ 
     var index = $('ul.topnav > li > a').index(this); 
     $(this).addClass('selected'); 
     $('nav ul ul').css('margin-top',(38*parseInt(index))); 
    }).on('mouseleave',function(e){ 
     $(this).removeClass('selected'); 
    ); 

    var currentID = this; 

    $(this).parent().find('ul').on('mouseenter',function(e){ 
     //fire several times 
     console.log('hover');   
     $(currentID).addClass('selected'); 
    }).on('mouseleave',function(e){ 
     $(currentID).removeClass('selected'); 
     //fire several times 
     console.log('end hover'); 
    }); 

}); 

Answer 2

每次執行外mouseenter回調時間，它附加新的，額外的事件處理程序的ul（其將做同樣的事情與先前附加的處理程序。

當鼠標然後進入該ul ，所有連接的事件處理程序被調用。

你只應該重視事件處理一次，而不是在每一個mouseenter。