CODEWITHSUNDEEP
jquerymenumouseleave
Paul Elliot
Paul Elliot

Reputation: 475

jquery mouseleave() being ignored

Hi I am using mouseleave() on a dropdown navigation menu so that when the user leaves the submenu dropdown the submenu disappears, however it seems to be ignoring it and the menu remains. Any ideas? Here is the site and code:

http://www.maiagifts.co.uk/about-us/info_1.html

    $(document).ready(function() {

    $('#newcats li').addClass('parentitem');
    $('.newsubs li').removeClass('parentitem');
    $('.newsubs').hide();                      

    $('.parentitem').hover(              
    function(){
    $(this).children('.newsubs').show();
    $(this).siblings('.parentitem').children('.newsubs').hide();

 });


    //problem is here//
    $('.newsubs').mouseleave(
    function(){
    $(this).hide();
    });
    //problem is here//


    });

Upvotes: 2

Views: 770

Answers (4)

Paul Elliot
Paul Elliot

Reputation: 475

I changed the hover() method to .mouseover() and started working. I wonder if because i used hover() with a function only for the mouseover part of it, jquery had already decided it had an empty mouseleave so ignored the second one. just a guess.

Upvotes: 0

Rune FS
Rune FS

Reputation: 21742

if you look in the development console of the site your are linking to you will see a bunch of error messages one of them (repeated) being "Uncaught TypeError: Object #<Object> has no method 'mouseleave'" so the above code attaching the handler is never executed.

.on isn't defined either and I'm guessing that they are all a result of the first error message you have which is Uncaught TypeError: Cannot read property 'guid' of undefined on line 91 in jquery.

In other words the jQuery script isn't executed in it's full length and mouseleaveand other methods such as on is never defined.

Upvotes: 0

Gaz Winter
Gaz Winter

Reputation: 2989

Have you tried:

   $('.newsubs').mouseleave(
    function(){
    $('.newsubs').hide();
    });

Would that achieve what you want?

Upvotes: 0

Dipak
Dipak

Reputation: 12190

Try with .on

$('.newsubs').on('mouseleave', function(){
    $(this).hide();
});

If you are using jquery version less than 1.7.1 then use .live()

Upvotes: 4

Related Questions