Jquery silent error in drupal 7

Question

I'm trying to use an uncotroversial piece of code to change the background color of a div when the mouse hovers over it.

Currently, my install of drupal refuses to register the hover event, I have tried substituting my code with a console.log('hovering') and I still get nothing.

here is the code. http://jsfiddle.net/tmXfW/2/

( function($) {
        var msg = $().jquery;
        console.log(msg);
        $('div.quicklink-row').hover(function() {
                $(this).addClass('blue-link');
        }, function() {
                $(this).removeClass('blue-link');

        });
})(jQuery);​

Answer 1

You should wrap your functionality in a Drupal Behavior. This will make it work even if elements on the page change via ajax and whatnot.

So the following:

(function($) {
  Drupal.behaviors.myCustomModule = {
    attach: function() {
      //var msg = $().jquery;
      //console.log(msg);
      $('div.quicklink-row').hover(function() {
        $(this).addClass('blue-link');
      }, function() {
        $(this).removeClass('blue-link');
      });
    }
  };
})(jQuery);​

But aside from that.... why are you using Javascript for something that can be done so simply with CSS?

div.quicklink-row:hover {
  background: #00F;
}

Answer 2

The have been several issues with the jsfiddle code.

1. The most suspected line is this: var msg = $().jquery; Try changing it to: var msg = $.fn.jquery;

2. The jsfiddle has been reported to insert some invisible characters producing the SyntaxError: Unexpected token ILLEGAL errors in the console (see this issue)

3. Your code contains only the encapsulation wrapper, but inside it lacks the $.ready(function(){}) or its equivalent.

So I typed your code from scratch, making the changes (1) and (3) and it worked fine.