jQuery + Javascript - accessing object fields in anonymous function

Question

I'm not into JavaScript OOP, so I've made an object with some fields which contains some functions to invoke.

var test = {
    questions: [],

    addQuestion: function(questionTitle, possibleAnwsers)
    {
        // not really important
    },

    appendQuestionToHTML: function(question)
    {
        // not really important
    },

    makeQuestionFieldsEditable: function($questionNode)
    {
        $questionNode.find(".questionTitle").first(function(){this.changeTextOnClick($(this));});
        $questionNode.find(".questionChoice").each(function(){this.changeTextOnClick($(this));});
    },

    changeTextOnClick: function($spanElement)
    {
        // not really important
    }
};

Following object in makeQuestionFieldsEditable() function looks for ".questionTitle"-class node and all of ".questionChoice"-class nodes invoke another function for them. The problem is that using this in anonymous function references to itself, not function saved on field changeTextOnClick. Javascript/JQuery wants to invoke this function on HTMLDivElement, which doesn't exists.

Is there any solution?

Alain · Accepted Answer · 2012-11-27 22:39:58Z

3

You can do the trick using a reference to your this variable :

makeQuestionFieldsEditable: function($questionNode)
{
    var that = this;
    $questionNode.find(".questionTitle").first(function(){that.changeTextOnClick($(this));});
    $questionNode.find(".questionChoice").each(function(){that.changeTextOnClick($(this));});
},

answered Nov 27, 2012 at 22:39

Alain

37.1k18 gold badges128 silver badges160 bronze badges

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

1 Comment

Adrian Adamczyk Over a year ago

Sorry, it's too simple, I cannot accept your anwser. Just kidding, thanks.

svachalek · Accepted Answer · 2012-11-27 22:39:11Z

1

I think all you need to do is change 'this' to 'test' (the variable you have assigned this object to).

answered Nov 27, 2012 at 22:39

svachalek

1,1768 silver badges18 bronze badges

4 Comments

Alnitak Over a year ago

an object should never have to refer to itself by the name of a variable referencing it.

Adrian Adamczyk Over a year ago

This one also works, but I don't think if it's right way. Thanks anyway.

Alnitak Over a year ago

@Visher it works, but it's a nasty hack. If test gets renamed then the contents of the object have to change too. It also prevents more than one instance of the object from existing.

svachalek Over a year ago

I object to the phrase "nasty hack" in reference to calling a singleton by its name. If it were declared as a class rather than a singleton, that's another story.

Collectives™ on Stack Overflow

jQuery + Javascript - accessing object fields in anonymous function

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related