Jquery:为什么如果我有一个Jquery触发器在其他，第二个当发生多次

Jquery: Why if I had a jquery trigger inside in other, the second when occurs fire multiple times?

本文关键字：Jquery 第二个 为什么 如果 触发器 有一个 其他      更新时间：2023-09-26

我有下面的代码，使toggle垂直下拉。当我在'ul> li> a'中多次执行mouseenter时，问题就会发生，然后在选择子菜单并进入其中后，第二个触发器会多次触发。

$('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');
);

每次执行外部mouseenter回调时，它都会将新的，额外的事件处理程序附加到ul(它将与之前附加的处理程序做相同的事情)。

当鼠标进入ul时，所有附加的事件处理程序都被调用。

您应该只附加一次事件处理程序，而不是每个mouseenter。

每次将nav > ul > li > a悬停时，都将事件绑定到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');
    });
});

相关文章：