CODEWITHSUNDEEP
jquery
Ryan
Ryan

Reputation: 85

$(this) is causing e is undefined error

I found lots of people with similar errors but none being caused by $('this'). I did a tutorial and it worked fine, now I am trying to do one on my own and I get the e is not defined error when ever this is called.

I really don't know what question to ask, I'm just stumped.

Please forgive me if I screw up this code block.

$(function () {

    var nav = $('#nav'); //capture navigation call
    nav.children('li').addClass('navList'); //groups children (not grandchildren) and applies a class for easier use later

    $('.navList').each(function () { //.each is like for loop but with functions
        var that = $(this), //captures this call
            subMenu = that.find('ul') //groups sub menu items
            ;

        that.bind('mouseenter', function (e) {
            //console.log("that");
            subMenu.show().css();

        })
            .bind('mouseleave', function (e) {
            subMenu.hide();
        });
    });
});

HTML-not putting whole thing since it's the schools and I'm not sure how they feel about that. but here is the relevant part.

     <ul id="nav" class="cf">
        <li><a href="/">home</a></li>
        <li><a href="/">tutorials</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">AJAX</a></li>
            </ul>
        </li>
        <li><a href="/">screencasts</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">AJAX</a></li>
            </ul>
        </li>
        <li><a href="/">projects</a></li>
    </ul>

Upvotes: 0

Views: 77

Answers (1)

Anton Laptashev
Anton Laptashev

Reputation: 151

subMenu.show().css(); is causing problems. The call to css() is unnecessary here. It should be

        that.bind('mouseenter', function (e) {
            //console.log("that");
            subMenu.show();

        })
        .bind('mouseleave', function (e) {
            subMenu.hide();
        });

Working demo at http://jsfiddle.net/TsdRF/1/

Upvotes: 3

Related Questions