Passing jQuery .click() a function as a variable

Question

I'm working with a tabbed interface and have the following jQuery function set up to handle the click events of my tabs.

$(document).ready(function () {

    $('a#foo').click(function() {
        //content, various calls
        return false;
    });
});

The above is an example of one of my tabs, the others are also within the same document ready block. What I needed to do was make it so the currently selected tab could not be re-clicked and that in some other cases I could manually disable tabs if needed. I achieved this via the following:

$('a#play').unbind('click');    

This works fine, and it certainly disables the tabs but the problem then becomes rebinding the click action that was once there. I achieved this via the bind function:

$('a#foo').bind('click', function() {
//the same content and calls as before
return false;
});

This also works fine, but it has become exceedingly cluttered as I have added tabs to my UI. The immediate solution appears to be to create the function as a variable and then pass it into the initial click creation and into the binding event. Like so:

var Foo = new function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

This, for one reason or another, seems to be causing browser crashing issues. Is it not possible to pass a function as a var in this case or am I just doing it wrong? Alternatively, is there a better way to achieve the results I'm looking for? Thanks.

Answer 1

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

The Foo gives you the function, but adding ()'s after it means you are calling the function instead of passing the function itself. Since you're calling the function, false ends up getting passed to click and bind, obviously not doing anything. Some of your other problems might result from the fact that you simulating switching to that tab twice (calling the event handler twice).

var Foo = function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo);

$('a#foo').bind(Foo);

^^ should do what you want.

---

Alternatively, is there a better way to achieve the results I'm looking for?

Currently all we really know about your design is that you are calling using a click event handler to switch tabs. That part is awesome, but we'll need more info to give you the deeper answer you really want. If you post the code inside Foo we should be able to help a bit more. :D

---

EDIT: credit to SLaks♦ for noticing the new in the function declaration that I missed. I'll add a little more detail to his explanation:

When you write var foo = new function(...) { ... }, you're making a function literal, then calling it as a constructor.

It's equivalent to

var SomeClass = function(...) { ... }; var foo = new SomeClass;

without the SomeClass dummy variable.

The function() {} is an anonymous function as you would expect. new in javascript is a little more confusing. When you call a function and precede it with new, you are using that function to instantiate an instance of a class defined in the function. In JS, unlike most other languages, the entire definition of a class is in one constructor function, from which you set all the instance variables, like so:

Foo = function() { 
    this.a = "lala";
    this.b = 5;
}

To make instance methods of the 'class', you use the prototype attribute. However I just realized I've gotten super off-topic. Read more on that here and here. :D