title: How to make jQuery 1.7 .on() hover?
body: <p>I'm having a problem with dynamically created elements on hover state. When I hover on newly created html element, it doesn't work.</p>
  
  <p>Here's my HTML code:</p>
  
  <pre><code>&lt;button id="create"&gt;create new button&lt;/button&gt;
  &lt;button class="hover"&gt;hover me&lt;/button&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>var createBtn = $("#create");
  
  createBtn.click(function() {
      $('div').append('&lt;button class="hover"&gt;new hover button&lt;/button');  
      return false;        
  }); 
  
  
  $('.hover').hover(function() {
      alert('you hovered the button!');
  }, function() {
      alert('you removed the hover from button!');
  });
  </code></pre>
  
  <p>I even tried this code: </p>
  
  <pre><code>$('.hover').on({
      mouseenter : function() {
           alert('you hovered the button!');
      },
      mouseleave : function() {
          alert('you removed the hover from button!');
      }
  
  });
  </code></pre>
  
  <p>as shown here <a href="http://api.jquery.com/on/">http://api.jquery.com/on/</a>, but still no luck.
  Here's also demo: <a href="http://jsfiddle.net/BQ2FA/">http://jsfiddle.net/BQ2FA/</a></p>