Question

I need to pass this function as a callback to DOM event

var fooo = function() {
  $(this).append("foo");
  fooo = function() {
     $(this).append("bar");
  };
};

$("#hover").hover(fooo);​

This example should append “foo” and then “bar”s, however it doesn’t work. What am I doing wrong?

JSFiddle

Answer 1

You are changing the function assigned to fooo, not the function that is assigned as the callback for the .hover.

For clarity, when you pass a function as a handler for an event — like in the case of $().hover(fooo) — you are not passing the variable of fooo but the funciton that it points to. If you reassign fooo to something else the original function is still the one bound as the event handler.

If I wanted to do what you are trying to do, then I would use a slightly different paradigm. Something like

var fooo = (function() {
    var altBehavior = false;
    return function() {
        $(this).append(altBehavior ? "bar" : "foo");
        altBehavior = true;
    }
})();

$("#hover").hover(fooo);​

The actual bound function never changes, but the context it exists in does.