"toggleClass()" not working properly

Question

The .toggleClass() method is only adding "class" to my selection, so when clicking all i get is:

<div id="toggle" class>
...

Instead of

<div id="toggle" class="on">
...

I've been trying to figure it out for like 2 hours, reading posts about the same issue, but doesn't seem to be the same case as mine even though the result is.

Javascript's first bit is just animating a loading screen and hiding it

$(function() {
  $(".loader_gif_wrapper").fadeOut(1000, function() {
    $(".slider").animate({
      width: ["0%", "swing"]
    }, 2000, function() {
      // Animation complete.
      $(".loader_page_wrapper").hide();
      // FIN ANIMACIONES LOADING


      $("#toggle").click(function() {
        $(this).toggleClass('on');
        //$("nav").toggle();
      });
    });
  });
});

#toggle {
  position: absolute;
  left: 3rem;
  top: 3rem;
  z-index: 10000;
  width: 40px;
  height: 40px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease-out;
  opacity: 1;
  visibility: visible;
}

#toggle .span {
  height: 3px;
  background: #ffffff;
  transition: all 0.3s ease-out;
  backface-visibility: hidden;
  margin: 5px auto;
  border: solid 1px $tres;
} //#toggle.on{
//    border: solid 0px $tres;}
#toggle.on #one {
  transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="toggle">
  <div class="span" id="one">One</div>
  <div class="span" id="two">Two</div>
  <div class="span" id="three">Three</div>
</div>

Answer 1

You have to put the event declaration out of the callback so you will be sure that event will be attached in all case if the callback reached or not :

$(function() {
  $(".loader_gif_wrapper").fadeOut(1000, function() {
    $(".slider").animate({
      width: ["0%", "swing"]
    }, 2000, function() {
      // Animation complete.
      $(".loader_page_wrapper").hide();
    });
  });

  $("#toggle").click(function() {
    $(this).toggleClass('on');
    //$("nav").toggle();
  });
});

WORKING SAMPLE

$(function() {
  $("#toggle").click(function() {
    $(this).toggleClass('on');
  });
});

#toggle {
  position: absolute;
  left: 3rem;
  top: 2rem;
  z-index: 10000;
  width: 40px;
  height: 30px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease-out;
  opacity: 1;
  visibility: visible;
  background-color: green;
}

#toggle .span {
  height: 3px;
  background: #ffffff;
  transition: all 0.3s ease-out;
  backface-visibility: hidden;
  margin: 5px auto;
  border: solid 1px;
  border: solid 0px;
}

#toggle.on #one {
  transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="toggle">
  <div class="span" id="one"></div>
  <div class="span" id="two"></div>
  <div class="span" id="three"></div>
</div>