toggleClass only adds 'class' as attribute to HTML element - not the acctuall class

Question

I have an odd problem. I have used toggleClass before and had it working nicely. Now however only the 'class' attribute gets added to the element but no actuall class. Like this:

$("#slideButtonMenu").click(function(){
  $("#sidebar").toggleClass("slideLeft");
});

.slideLeft {
  left: -220px;
}

This is what I get while inspecting the element. Before click on "#slideButtonMenu":

<aside id="sidebar"> == $0

When/after clicking the button:

<aside id="sidebar" class> == $0

Wanted outcome after first click:

<aside id="sidebar" class="slideLeft"> == $0

I don't really know what the == $0 means but I don't think it affects this. If I change toggleClass to addClass it successfully adds the class... but then I obviously can't slide the menu back out again.

This behaviour can occur when the `click` event is triggered an even number of times. Have you duplicated the `click` handler? — Rory McCrossan, Aug 22 '17 at 12:41
Works fine here: https://jsfiddle.net/2oehqmzc/ . Please create a [MCVE] showing the issue. — Turnip, Aug 22 '17 at 12:41
Possible duplicate of [What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?](https://stackoverflow.com/questions/36999739/what-does-0-double-equals-dollar-zero-mean-in-chrome-developer-tools) — Alive to die - Anant, Aug 22 '17 at 12:42
@AlivetoDie Please read the question. It is not about `== $0`, and OP acknowledges that it's probably unrelated. — GolezTrol, Aug 22 '17 at 12:45
As Rory says, you are most likely binding your click event multiple times somehow. — Turnip, Aug 22 '17 at 12:49
@RoryMcCrossan and Turnip - for what it is woth I just changed to use .on('click'.....) didn't change it. I will read up on how to check this as you say and I'll get back to y'all with updates. Thanks for now — Brainmaniac, Aug 22 '17 at 12:51
@Turnip and Rory - Yay thanks! went here : https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times and added .unbind() and it works like a charm now thanks! — Brainmaniac, Aug 22 '17 at 12:54
It shouldn't be necessary to unbind the event. Something is wrong elsewhere in your code. Check that you aren't accidentally loading the jQuery library more than once. — Turnip, Aug 22 '17 at 12:55

Brainmaniac · Accepted Answer · 2017-08-22T15:44:36.940

As @Rory McCrossan and @Turnip suggested my click was binded wrongly.

The answer was to add unbind(), like so:

$("#slideButtonMenu").unbind().click(function(){
    $("#sidebar").toggleClass("slideLeft");
});

Works now!

EDIT: According to @Turnip this should not be needed if everything with my code was done correctly but for now I am just gonna YOLO and go with this for my POC tmrw.

EDIT2: Ok, found the wrongings. I did load this script twice:

$("#slideButtonMenu").click(function(){
    $("#sidebar").toggleClass("slideLeft");
});

When changed that so it only loaded once it worked without .unbind()

toggleClass only adds 'class' as attribute to HTML element - not the acctuall class

1 Answers1