Jquery variable not instantiated until click event

Question

Problem: Element is not 'maxing' until user double clicks on the red square.

Basically the variable 'clicked' is being instantiated onClick instead of being instantiated before hand. The resulting behavior is that the user has to click once for the 'clicked' variable to be instantiated and then the function works as desired.

Here is the JSFiddle

And the important sections of code:

var container = $(this).parents('.container');
var paragraph = $(container).find('.text');
if (this.clicked == 0) {
    container.removeClass("large-4");
    container.addClass("large-8");
    paragraph.removeClass("hide");
    this.clicked = 1;
}

Any help is appreciated thanks!

Details (Don't have to read :D):

The reason I'm doing this inverted selection (selecting a child element and then the parent element) is because there will be many of these '.container' elements and each one needs to have the same respective min/max functionality by clicking on a minmax icon.

Obviously the method is not referencing the single local 'clicked' class variable. That doesn't even make sense as each element requires its own 'clicked' variable.

If there is a better way of doing this I'm open to anything, but even so it would be nice to figure this specific problem out as it would help my overall understanding of Jquery.

I'm using Foundation's framework on this project for those familiar with the class names.

I have this odd feeling that this has something to do with closure, but yea...don't know nearly enough about JS or JQuery to really figure this one out.

Yea whoops hold on made a mistake with the fiddle, whew fixed :D, sorry about that, and wow that was really fast! — ksrb
– ksrb, Commented Aug 12, 2013 at 23:56

Community · Accepted Answer · 2017-05-23 11:56:38Z

1

In a jQuery event handler this refers to the object that triggered the event. So in your click callback, this no longer refers to your instance of Artist. To get around this, you can create a variable that and set it to the Artist instance. Thanks to javascript closures, you can refer to that and still have access to the instance.

Working Demo

Artist.clickHandler = function () {
    var that = this;
    //this.clicked is undefined until the event is actually fired
    that.clicked = 0;
    $('.minmax').click(function () {
        if (typeof that.clicked === 'undefined') {
            console.log("that.clicked is undefined");
        } else {
            console.log("that.clicked is defined");
        }
        //rest of handler here
    });
};

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Aug 13, 2013 at 0:00

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

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

14 Comments

ksrb Over a year ago

Okay so in the original code my 'this' was referring to a Jquery object? Specifically the Jquery object that matched to the class '.minmax'? Sorry little confused. But yea it works great such a small fix :D thanks!

Solomon Closson Over a year ago

I have no idea what this is supposed to do, it doesn't work at all for me in Opera. I get nothing when clicking on the red square. Just to let you know.

ksrb Over a year ago

@SolomonClosson I'll definitely look into that, did you try it another browser? What supposed to happen is when u click on the red square the <div class='container large-4'> is supposed to change to <div class='container large-8'>

colestrode Over a year ago

@user1490379 The click handler has a different context from your Artist.clickHandler function. It might help to read this article on javascript scope: coding.smashingmagazine.com/2009/08/01/…

Solomon Closson Over a year ago

@user1490379 - Strange as I am getting an undefined variable $ in $(window).load from jsfiddle I suppose, but this has never happened before so that's why it is very strange. That's probably why it isn't working for me in Opera.

|

Maksims Kitajevs · Accepted Answer · 2017-10-03 07:27:08Z

0

Question has been answered but i want to add that here you could change addClass() and removeClass() to toggleClass() and your code will be more maintainable.

answered Oct 3, 2017 at 7:27

Maksims Kitajevs

2252 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery variable not instantiated until click event

2 Answers 2

14 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related