title: hover working properly with one class and not with another
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="channellist"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Using Ajax i am getting the channels dynamically when the page loads and appending in the channellist container. After appending my html looks like this.</p>
  
  <pre><code>&lt;div class="channellist" id="channellist"&gt;
     &lt;div class="c01" id="c1"&gt;&lt;/div&gt;
     &lt;div class="c01" id="c2"&gt;&lt;/div&gt;
     &lt;div class="c01" id="c3"&gt;&lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>I tried like this</p>
  
  <pre><code>$('.channellist').hover(function() {
   alert(this.id);
  });
  </code></pre>
  
  <p>I got the alert message. </p>
  
  <p>when i tried the hover on c01 class i didnt got the alert.</p>
  
  <pre><code>$('.c01').hover(function() {
   alert(this.id);
  });
  </code></pre>
  
  <p>I dont know where it is going wrong. Can anyone help to figure it out.</p>