Is my jQuery syntax wrong here?

Question

Hey everyone,

I am learning jQuery and I'm finding that this code is not working:

<script type="text/javascript">
  $(document).ready(
    /* Navigtion Stuff */
      function(){
        $('.menu ul').hover(
          function(){
            $(this).parent().addClass("active");
          },
          function(){
            $(this).parent().removeClass("active");
          }
        )
      },
      function(){
        $(".menu").parents("li").addClass("active");
      }
    );
</script>

The first function does what it is supposed to. The second function does not. Is my syntax bad? If not, then I have a feeling that my code is conflicting with some other Javascript on the page.

Thanks in advance!

Answer 1

The ready function only takes one parameter. You are trying to pass two functions.

function 1 :

function(){
        $('.menu ul').hover(
          function(){
            $(this).parent().addClass("active");
          },
          function(){
            $(this).parent().removeClass("active");
          }
        )
      }

function 2:

function(){
        $(".menu").parents("li").addClass("active");
      }

To bind the hover event to $('.menu ul') and add 'active 'class to $(".menu").parents("li") you should do

$(document).ready(function() {
        /* Navigtion Stuff */

            $('.menu ul').hover(
              function(){
                $(this).parent().addClass("active");
              },
              function(){
                $(this).parent().removeClass("active");
              }
            )
            $(".menu").parents("li").addClass("active");
        });

Answer 2

you have a little confusion with the brackets

 $(document).ready(
/* Navigtion Stuff */
  function(){
    $('.menu ul').hover(
      function(){
        $(this).parent().addClass("active");
      },
      function(){
        $(this).parent().removeClass("active");
      }
    );
    $(".menu").parents("li").addClass("active");
  }
);

is better.

Answer 3

The ready function only takes one function as a parameter. See the above posts for examples.