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。