title: Click toggle function disabling preventdefault
body: <p>I'm trying to execute a script that toggles between two functions when touchMenuButton is clicked. When it's clicked I want to add and remove a class, and when it's clicked again reverse it and remove and add those classes. But it's not working and I can't figure out why.</p>
  
  <pre><code>$(function () {
      var touchMenuButton = $("#touchmenubutton");
      var touchMenuCanvas = $("#touchmenucanvas");
      var touchMenuDrawer = $("#touchmenudrawer");
  
      $(touchMenuButton).click(function (e) {
          e.preventDefault();
      });
  
      $(touchMenuButton).on("click", function () {
          if $(touchMenuCanvas).hasClass("canvas-closed") {
              $(this).removeClass("canvas-closed");
              $(this).addClass("canvas-open");
          } else {
              $(this).removeClass("canvas-open");
              $(this).addClass("canvas-closed");
          }
      });
  });
  </code></pre>