title: Unable to use .hasClass("active") method on dropdown
body: <p>This is probably the biggest noob mistake, but on my navbar, I've set my dropdown link as active (displayed by the underline), and I have a function that checks when the link is clicked on, whether "dropdown" has the class "active," which it should, because I set it as so, and display an alert if this is the case. For some odd reason however, I can click on it all day long and nothing will happen - most likely because of the dropdown menu being triggered at the same time the link is clicked, but I don't see why that would be an issue.</p>
  
  <p><a href="http://www.bootply.com/XJ5FQMnJGQ" rel="nofollow">Bootply</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt; 
          &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;                   
          &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;                    
              &lt;ul class="nav navbar-nav navbar-right"&gt;                    
                  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;                          
                  &lt;li class="dropdown active"&gt;    
                      &lt;a href="2" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span&gt;2&lt;/span&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;!-- END: "dropdown-menu" --&gt;      
                  &lt;/li&gt;&lt;!-- END: "dropdown" --&gt;                   
              &lt;/ul&gt;&lt;!-- END: "collapse navbar-collapse navHeaderCollapse" --&gt;
          &lt;/div&gt;&lt;!-- END: "container" --&gt;
      &lt;/div&gt;&lt;!-- END: "container" --&gt;
  &lt;/div&gt;&lt;!-- END: "navbar navbar-inverse navbar-fixed-top" --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-inverse .navbar-nav &gt; .active &gt; a,
  .navbar-inverse .navbar-nav &gt; .active &gt; a:hover,
  .navbar-inverse .navbar-nav &gt; .active &gt; a:focus {
    color: #ffffff;
    text-decoration: underline;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).on("click", "span",function(){
      if($("dropdown").hasClass("active")) {
          alert( $( this ).text() ); 
      }
  });
  </code></pre>
  
  <p>Anyone know how to fix this function?</p>