Jquery not binding event onload

Question

(function() {
var bgOn;
$(".ContainingBox").on('hover', function() {
    function() { 
    bgOn = $(this).css("background-color");
            $(this).css("background-color", "#e5fff8");
      }, function() {
      $(this).css("background-color", bgOn);
      }
 });
})();

I want to bind an event for hover. This code worked fine when I did not wrap it in the anonymous function, and used .hover() . However, we have a requirement to not use global variables. So i need to bind the event!

Is this not possible?

Answer 1

Your code has syntax errors, specifically on() does not accept multiple callbacks etc.
Also, there is no native hover event, you should use mouseenter and mouseleave instead

$(".ContainingBox").on({
    mouseenter: function() {
        $(this).data('bg', $(this).css("background-color"));
        $(this).css("background-color", "#e5fff8");
    },
    mouseleave: function() {
        $(this).css("background-color", $(this).data('bg'));
    }
});

Using jQuery's data() , and not a single variable, will remember the background color for each element

FIDDLE

Answer 2

try this....

(function() {
       var bgOn;
       $(".ContainingBox").on('mouseover', function() {
          function() { 
             bgOn = $(this).css("background-color");
             $(this).css("background-color", "#e5fff8");
          }, function() {
               $(this).css("background-color", bgOn);
             }
       });
 })();