Passing jQuery.click () function as a variable

Question

I work with a tabbed interface and have the following jQuery function configured to handle click events on my tabs.

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

The above example is one of my tabs, the rest are also in the same document. I needed to make sure that the currently selected tab could not be pressed again, and in some other cases I could manually turn off the tabs if necessary. I achieved this through the following:

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

This works fine, and it definitely disables tabs, but the problem is then intertwined with the click action that was once there. I achieved this through the bind function:

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

This also works great, but it has become extremely marsupial since I added tabs to my interface. The immediate solution is to create the function as a variable, and then transfer it to the initial creation of clicks and to the binding event. For instance:

 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 problems with the browser. Can't pass the function as var in this case, or am I just doing it wrong? Also, is there a better way to achieve the results I'm looking for? Thanks.

Answer 1

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

Foo provides you this function, but adds () after it means that you are calling the function instead of passing the function itself. Since you are calling the function, false ends up being passed in click and bind obviously does nothing. Some of your other problems may arise due to the fact that you simulate switching to this 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?

Right now, all we really know about your design is what you call with the click event handler to switch tabs. This part is awesome, but we need more information to give you the deeper answer you really want. If you put the code inside Foo , we can help a little more .: D

---

EDIT: credit for SLaks ♦ to notify new in a function declaration that I missed. I will add a few details to his explanation:

When you write var foo = new function (...) {...}, you create functions, then calling its constructor.

It is equivalent

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

without the dummy variable SomeClass.

function() {} is an anonymous function, as you would expect. new in javascript is a bit confusing. When you call a function and precede it with new , you use this function to instantiate the class defined in the function. In JS, unlike most other languages, the entire class definition is in a single constructor function, from which you specify all instance variables, for example:

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

To create class instance methods, you use the prototype attribute. However, I just realized that I have a super theme. More about this 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 create a function literal and then call it a constructor.

It is equivalent

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

without SomeClass dummy variable.

You just need to assign a function literal to a variable.

---

When you write .click(foo()) , you call foo and pass the result to click .
If foo does not return a function, this is not what you want to do.

You need to pass foo by removing the parentheses.

Answer 3

So, first press the accept button, but you call without (), since a click starts the function when it is ready. By adding (), you call it straight up.

Secondly, bind takes a string (which event you are binding) 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 the best way to achieve the result you are looking for, you can have a class on each tab, such as .tab . So you can just do:

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

... without the need for fluff with lots of id s.

Answer 5

Take a different approach and not unbind() .

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

Here is an example of common code:

 $('#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 a .selected class. You will need to change your code.

Answer 6

Adding brackets calls the function, but if you want to make it cool and strong, you can make Foo return a function that needs to be bound.

 function Foo(){ return function(){ //your onclick event handler here. }; } $('a#bar').bind(Foo()) 

This uses one aspect of programming javascript functions, closure, which is cool, but not as efficient as some of the other answers. You need to do some research on closure, as you can use them to do cool things. http://www.javascriptkit.com/javatutors/closures.shtml