title: Addclass function in jQuery not adding the class
body: <p>I have a function that toggles CSS class on runtime.</p>
  
  <pre><code>showSearchBar: function () {
      $searchBar.addClass('open');
      alert($searchBar.hasClass('open'));
      $searchBar.find('input[type="text"]').focus();
  }
  </code></pre>
  
  <p>This simple function throws an alert saying <code>open</code> class is not added. I checked in browser as well, and the class seems to not be added at all. The object itself is accessible, and the function is getting called. I checked CSS as well, and the class exists. So, basically I am trying to get a hint on how to debug this problem better.</p>
  
  <p>Full function:</p>
  
  <pre><code>var $searchBar = $('.search-bar');
  $.AdminBSB.search = {
      activate: function () {
          var _this = this;
          //Search button click event
          $('.js-search').on('click', function () {
              _this.showSearchBar();
          });
  
          //Close search click event
          $searchBar.find('.close-search').on('click', function () {
              _this.hideSearchBar();
          });
  
          //ESC key on pressed
          $searchBar.find('input[type="text"]').on('keyup', function (e) {
              if (e.keyCode == 27) {
                  _this.hideSearchBar();
              }
          });
      },
      showSearchBar: function () {
          $searchBar.addClass('open');
          alert($searchBar);
          $searchBar.find('input[type="text"]').focus();
      },
      hideSearchBar: function () {
          $searchBar.removeClass('open');
          $searchBar.find('input[type="text"]').val('');
      }
  }
  </code></pre>
  
  <p>Corresponding div</p>
  
  <pre><code>&lt;div class="search-bar"&gt;
      &lt;div class="search-icon"&gt;
          &lt;i class="material-icons"&gt;search&lt;/i&gt;
      &lt;/div&gt;
      &lt;input type="text" placeholder="START TYPING..."&gt;
      &lt;div class="close-search"&gt;
          &lt;i class="material-icons"&gt;close&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Apparently the object reference is there. But if I do <code>$searchBar.hasClass</code>, it always returns false.</p>