JQuery function still firing with wrong class

Question

I am trying to create a navigation optimized for mobile devices.

 <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>  

The nav class changes correctly from .nav-main to .nav-mobile when the window gets smaller than 1000px.

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

I have a sliding down menu configured to hang when the nav class is .nav-main. However, this request is still triggered when .nav-mobile is a navigator class. Why is this happening? Why is there still an event listener for the links, although the class has changed?

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


});

Any help is appreciated, I'm still relatively new to jQuery and SO.

Answer 1

, $('.nav-main li').hover(function (), , , . binding an event vs delegating 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). .

, :

: http://jsfiddle.net/DinoMyte/p8ARq/619/

: http://jsfiddle.net/DinoMyte/p8ARq/620/

, hover binding mouseenter-mouseleave delegation.