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

Answer 2

You need to remove new from the function definition and stop calling the function when using it.

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.

You need to simply assign the function literal to the variable.

---

When you write .click(foo()), you're calling foo, and passing the result to click.
Unless foo returns a function, that's not what you want to do.

You need to pass foo itself by removing the parentheses.

Answer 3

So firstly, click accepts a function, but you call without the () as click runs the function when ready. By adding the () you call it straight up.

Secondly, bind takes a string (what event you are binding to) AND a function (as above)...

Use the following:

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


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

Hope that helps :)

Answer 4

Try:

var foo = function() // not "new function", as this creates an object!
{
    return false;
}

$("a#foo").click(foo); // not "Foo()", as you can't call an object!

---

As for a better way to achieve the result you're looking for, you could have a class on every tab, such as .tab. That way, you can just do:

$("a.tab").click(function() { return false; });

... without having to fluff around with a lot of ids.

Answer 5

Take a different approach, and do not unbind().

I assume the tabs are all in a common container. If so, just use the delegate()^(docs) method to place a handler on the container.

Here's a generic code example:

$('#container').delegate('.tab:not(.selected)', 'click', function() {
    $(this).addClass('selected')
           .siblings('selected').removeClass('selected');
    // rest of the tab code
});

This will only trigger clicks on .tab elements that do not have the .selected class. You'll need to modify for your specific code.

Answer 6

Adding the parenthesis calls the function, but if you wanted to make it cool and stuff, you could make it so that Foo returned the function to be bound.

function Foo(){

    return function(){
        //your onclick event handler here.
    };
}

$('a#bar').bind(Foo())

This makes use of one on javascript's function programming aspects, closures, which is cool, but not as efficient as some of the other answers. You should do some research about closures, as they can be used to make some cool stuff. http://www.javascriptkit.com/javatutors/closures.shtml