jQuery Forum

The problem is when I used .each, for each iteration I want it to call a user-defined function typeCheck().

Now when I try this, I get an error in the Chrome console: "Uncaught TypeError: Cannot call method 'call' of undefined". Also apparently a ninja bug has slipped into this because "Button" disappears when you click on it... weird.

Case 2
So checking to see if something was wrong with my logic, I replaced the code in typeCheck with a simple console.log() call.

1. $(document).ready(function(){
2.       function typeCheck(){
3.             console.log("test");
4.       }
5.     
6.       $("#button").click(function(){
7.             $("#list li").each(typeCheck());
8.       });
9. });

It prints out "test" once and then gets the same error. So it seems like it's calling the function once successfully though.

Case 3
So instead of using a user-defined function, I just have jQuery call the function directly like this:

1. $(document).ready(function(){
2.       $("#button").click(function(){
3.             $("#list li").each(function(){
4.                   if ($(this).hasClass("tag1")) {
5.                         if($(this).is(":hidden")) {
6.                               $(this).fadeIn();
7.                         }
8.                   } else {
9.                         $(this).fadeOut();
10.                   }
11.             });
12.       });
13. });

Demo of Case 3

Here the behavior works fine, and the function code is verbatim to the first two cases, so I think my general logic is right.

So why aren't the first two cases working as intended and what's up with the weird ninja bug in case 1? I know I can just use case 3 since it works, but I would like to keep my code more on the organized side. I'm calling this function quite a bit, and it's kind of annoying having to copy and paste a buncha code when a user-defined function would suffice...