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, Aug 12 '13 at 23:56

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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 '17 at 11:56

Community

1
1

answered Aug 13 '13 at 00:00

cfs

10,610
3
30
43

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! – ksrb Aug 13 '13 at 00:04
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. – Solomon Closson Aug 13 '13 at 00:05
@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
is supposed to change to
– ksrb Aug 13 '13 at 00:07
@user1490379 The click handler has a different context from your `Artist.clickHandler` function. It might help to read this article on javascript scope: http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/ – cfs Aug 13 '13 at 00:07
@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. – Solomon Closson Aug 13 '13 at 00:12
@SolomonClosson Yea that is weird is the 1.10.1 Jquery library selected on the left in the Fiddle? – ksrb Aug 13 '13 at 00:14
@cfs Thanks for the help upvoted and accepted :D, will definitely look into that article – ksrb Aug 13 '13 at 00:15
Yes, it's selected, but doesn't seem to be working properly, atleast in Opera... Changed to jQuery 1.9.1 and now I see what it does... works great. NICE! Must be some sort of problem with Opera and jQuery 1.10.1 perhaps? Or maybe it's jsfiddle's link to it for Opera browsers... unknown – Solomon Closson Aug 13 '13 at 00:15
Same thing happens in Opera and jQuery 2.0.2 selected. – Solomon Closson Aug 13 '13 at 00:19
@SolomonClosson Hmm just downloaded opera :P, seems to work for me try clicking on the box a couple of times, my original version didn't work on the first click – ksrb Aug 13 '13 at 00:56
Nope, it isn't working like I said. I have Opera Version 12.16, Build 1860, Platform Win32, System Windows 7. No biggie... – Solomon Closson Aug 13 '13 at 01:31
You want to avoid long exchanges of comments. Try using chat instead. – cfs Aug 13 '13 at 01:39
@cfs will do, the article you linked was very interesting and made me realize how straightforward the problem was :D. But one thing that still doesn't make sense to me is how each element 'holds' its own clicked variable? Is this something that Jquery just handles? I've changed the fiddle to better reflect this question: [fiddle](http://jsfiddle.net/jqTfB/10/) Thanks for all the help btw, sorry if I'm burdening you with too many question I'll move it over to chat if its too much of a bother :D. – ksrb Aug 13 '13 at 02:44
"Holding" the value of a variable is a feature of javascript, it's called a "closure". In my answer, I linked to a SO question that explains them well. Give that read; good luck! :) – cfs Aug 13 '13 at 11:34

score 0 · Answer 2 · answered Oct 03 '17 at 07:27

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 03 '17 at 07:27

Maksims Kitajevs

225
1
7

Jquery variable not instantiated until click event

2 Answers2