title: jQuery executing both branches of an if-else statement in Rails
body: <p>I have the following jQuery on a Rails page:</p>
  
  <pre><code>$(document).on('click','.reportsArrow', function() {
      if ( $(this).parent().hasClass('reportCollapsed') ) {
        console.log("A");
        $(this).parent().removeClass('reportCollapsed');
      }else{
        $(this).parent().addClass('reportCollapsed');
          console.log("B");
      }
  });
  </code></pre>
  
  <p>When I click on an element with <code>reportsArrow</code> and without <code>reportCollapsed</code>, the log shows</p>
  
  <p><code>B</code></p>
  
  <p><code>A</code></p>
  
  <p>Meaning it is executing the <code>else</code> part and then executing the <code>if</code> part.  I want the function to only be executed once per click, and to only follow one code path.  Why is it being executed twice and how do I stop this?  I should point out that this toggles correctly in the mockups created by the web designer (on HTML/CSS/JS only).  It looks like the problem is Rails related.</p>
  
  <p>EDIT:</p>
  
  <p>We have found a working solution:</p>
  
  <pre><code>$('.reportsArrow').click(function() {
      $(this).parent().toggleClass('reportCollapsed');
  }); 
  </code></pre>