jQuery 函数仍然触发错误 class

Question

我正在尝试创建针对移动设备优化的导航。

 <nav id="nav-content" class="nav-main">       
                <ul>
                    <li>
                        <a href="">about</a>
                    </li>
                    <li>
                        <a class="parent-link">production</a>
                        <ul class="sub-menu">
                            <li><a href="">workshops</a></li>
                            <li><a href="">shows</a></li>
                            <li><a href="">greenlite</a></li>
                        </ul>
                    </li>
                    <li><a href="">watch</a></li>
                    <li><a id="link-logo" href="index.html"><div id="logo"></div></a></li>
                    <li>
                        <a class="parent-link">members</a>
                        <ul class="sub-menu">
                            <li><a href="">current</a></li>
                            <li><a href="">prospective</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="parent-link">postings</a>
                        <ul class="sub-menu">
                            <li><a href="">jobs</a></li>
                             <li><a href="">auditions</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="parent-link">contact</a>
                       <ul class="sub-menu">
                           <li><a href="">team</a></li> 
                           <li><a href="">advertise</a></li>
                           <li><a href="">suggestions</a></li>  
                        </ul>
                    </li>
                </ul>

            </nav>

            <nav id="nav-mobile-header"><a href="index.html"><div id="logo-small"></div></a><div id="nav-trigger">
                ☰
             </div></nav>

当 window 小于 1000 像素时，导航 class 从 .nav-main 正确更改为 .nav-mobile。

$(document).ready(function()
{

    $(function () {
    $(window).resize(function () { 
        if ($(window).width() <= 1000) 
        {
            $('#nav-content').removeClass('nav-main').addClass('nav-mobile');
        }
        else
            {
                $('#nav-content').removeClass('nav-mobile').addClass('nav-main');
                if ($('#wrap').hasClass('to-left'))
                    {
                        $('#wrap').removeClass('to-left');
                    }
            }

    }).resize(); 
});
});

当 nav 的 class 是 .nav-main 时，我在悬停时设置了一个下拉菜单。但是，当 .nav-mobile 是导航的 class 时，仍然会触发此查询。为什么会这样？为什么即使 class 已更改，链接的事件侦听器仍然存在？

$(document).ready(function()
{
    var slideTime = 300;
        $('.nav-main li').hover(function () //why does this still work for .nav-mobile?
        {

            $('.sub-menu', this).stop().slideDown(slideTime);
            $('.parent-link', this).css('color', '#555');

        },function () 
        {
            $('.sub-menu', this).stop().slideUp(slideTime);
            $('.parent-link', this).attr('style', '');
        });


});

感谢任何帮助，我对 jQuery 和 SO 还是比较陌生。

Answer 1

您仍在执行 $('.nav-main li').hover(function () 的原因是该事件的注册方式。基本上是 binding an event 对 delegating an event.

绑定事件:

$('.nav-main li').hover(function () -> 将 hover 事件绑定到元素。当您绑定一个事件时，它会在内存中注册到该元素。如果元素的属性或属性发生更改，则不会影响事件，因为它绑定到元素，而不是它的属性。因此，即使您更改 class，该事件仍会保留在内存中。删除它的方法是使用 unbind 事件 -> $('.nav-main li').unbind('hover');

委托活动：

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach/detach a single event listener for elements that exist or don't exist now or in the future.

来源：https://learn.jquery.com/events/event-delegation/

$(document).on('mouseover','.nav-main li',function () ->

将 mouseover-mouseleave 事件委托给文档中的元素。

当您将事件委托给文档时，内存会跟踪文档中的元素 (DOM)。对元素的属性或 class 等属性的任何更改都会将其从内存中删除，并且不再适用于该元素。

这里有 2 个例子展示了理论的实际应用：

绑定：http://jsfiddle.net/DinoMyte/p8ARq/619/

委派：http://jsfiddle.net/DinoMyte/p8ARq/620/

因此，您应该将 hover binding 替换为 mouseenter-mouseleave delegation。

jQuery 函数仍然触发错误 class

jQuery function still fires with the wrong class

html

css

jquery

ancestor