title: Jquery Onclick div with class and alert if clicked on inner div
body: <p>If I am clicking on 'See me', it should alert me 'see me'.<br/>
  I could do this as $('div').click... and it's working fine too. But I think it's better to do with the container div. Because the entire page is a long page and the function will run whereever I click if I use div for onclick.</p>
  
  <pre><code>&lt;div class="directFilter"&gt;
      &lt;div class="boxWithRightArrow seeMe"&gt;See me&lt;/div&gt;
      &lt;div class="boldFont filterHeader"&gt;Sort By&lt;/div&gt;
      &lt;div class="boxWithRightArrow borderTop bestClick"&gt;Best click&lt;/div&gt;
      &lt;div class="boxWithRightArrow intermediateTime"&gt;Intermediate time&lt;/div&gt;
      &lt;div class="boxWithRightArrow shortestTime"&gt;Shortest time&lt;/div&gt;
      &lt;div class="boxWithRightArrow iPreferred"&gt;I preferred&lt;/div&gt;
  &lt;/div&gt;
  
  
  $('.directFilter').click(function() {
  
          alert($(this).attr('class')); //alerts directFilter 
  
              if ( $( this ).hasClass( "seeMe" ) ) {
                  alert("see me");
              } else if ($(this).hasClass("bestClick")) {
                  alert("b click");
              } else if ($(this).hasClass("intermediateTime")) {
                  alert("itime");
              } else if ($(this).hasClass("shortestTime")) {
                  alert("s time");
              } else if ($(this).hasClass("iPreferred")) {
                  alert("i pre");
              }
  }
      );
  </code></pre>
  
  <p><strong>JsFiddle : <a href="http://jsfiddle.net/smilyface/e2L7s/" rel="nofollow">http://jsfiddle.net/smilyface/e2L7s/</a></strong></p>
  
  <p>Any suggestions?</p>