jQuery 函数仍然使用错误的类触发

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>  

当窗口小于 1000 像素时，导航类从 .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-main 时，我在悬停时设置了一个向下滑动菜单。但是，当 .nav-mobile 是导航的类时，仍然会触发此查询。为什么会这样？为什么即使更改了类，仍然有链接的事件侦听器？

$(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 vsdelegating an event。

绑定事件：

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

委派活动：

事件委托是指使用事件传播的过程 （冒泡）在 DOM 中处理比 事件起源的元素。它允许我们附加/分离一个 现在或将来存在或不存在的元素的单个事件侦听器。

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

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

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

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

这里有 2 个例子展示了这个理论：

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

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

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