0

Ok terrible title but I couldn't think of another description.

I have the following code:

jQuery( document ).ready( function( $ ) 
{
    $.myNamespace = {
          init: function()
          {

             $('.button').click(function() {
                  this.anotherFunction();
             });
          },
          anotherFunction: function()
          {
               alert('insidefunction');
          }
    }
    $.myNamespace.init();
});

As you can see I am trying to call anotherFunction from inside init and have there the two ways I tried but didn't work. So how am I able to call that function or is my concept wrong?

Improve this question
2
  • Assuming you haven't bound things to a different context, how about this.anotherFunction()? Commented May 4, 2012 at 2:43
  • actually I tried that too...still comes back with "is not a function" error. Commented May 4, 2012 at 2:46

2 Answers 2

Reset to default
1 
jQuery( document ).ready( function( $ )
{
    $.myNamespace = {
          init: function()
          {
             var a=this;
             $('.button').click(function() {
                  a.anotherFunction();
             });
          },
          anotherFunction: function()
          {
               alert('insidefunction');
          }
    }
    $.myNamespace.init();

});

http://jsfiddle.net/ZpAtm/2/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

yes either that works or I just found out you can also do: $.myNamespace.anotherFunction()...But may I ask if it is necessary to make antoherFunction separate? Can I not just put it inside "init" function so I wouldn't have this problem in the first place?
@Rick Yes you could do that as well.
I guess I just don't know what the benefit is in separating out the functions like that...I am only doing it because I am follow practices by other developers but I don't have a full grasp on why to do it.....thanks...
As a small tip, most people tend to call a variable set to the value of this either that or self. Following naming conventions like that helps make your code easier to understand by other developers.
0

Absolutely calling it within the click handler changes things, as this inside any jQuery event handler is set to the element that caused the event.

Instead, try using the following pattern:

jQuery(document).ready(function($) {
    $.myNamespace = (function() {
        function init() {
            $('.button').click(function() {
                anotherFunction();
            });
        }

        function anotherFunction() {
            alert('insidefunction');
        }

        // return an object with all the functions you want 
        // available publically as properties. Don't include
        // any "private" functions.
        return {
            init: init,
            anotherFunction: anotherFunction
        };
    })();
    $.myNamespace.init();
});​
Improve this answer

2 Comments

Thanks for that insight. If I was solely doing this just to have a namespace so to prevent conflicts, then I could literally just put everything (all functions) inside "init", would that be correct to say?
@Rick Yes, I believe that would also work. The only time that Javascript creates a new scope is inside functions. Other blocks (if, for, etc) do not create a new scope. Also make sure you understand the principle of JS "hoisting".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.