javascript - Jquery: Why if I had a jquery trigger inside in other, the second when occurs fire multiple times? -
i have follow code make toggle vertical dropdown. problem happens when mouseenter several times in 'ul > li > a' , after select de submenu , enter inside it, second trigger fires multiple times.
$('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'); );
you binding events subelements of each time hover nav > ul > li > a
.
try this:
$('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'); }); });
Comments
Post a Comment