title: jQuery Tooltip event not firing on dynamically created element
body: <p>I have a working tooltip jQuery script:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div style="display:none;" class="tooltipcontent"&gt;
      &lt;p class="para"&gt;Your VIN needs to be:&lt;/p&gt;
      &lt;ul class="vinhelp"&gt;
          &lt;li&gt;Exactly 17 characters for a vehicle manufactured after 1980 (1981 or later model year.)&lt;/li&gt;
          &lt;li&gt;Without the letters I, O, or Q.&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; &lt;span class="questinfo"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>jQuery('.questinfo').hover(function () {
       // Hover over code
  
       var title = jQuery('.tooltipcontent').html();
  
       if (title) {
           jQuery('&lt;p class="tooltip"&gt;&lt;/p&gt;')
               .html(title)
               .appendTo('body')
               .fadeIn('slow');
       }
   }, function () {
       // Hover out code
  
       jQuery('.tooltip').remove();
   }).mousemove(function (e) {
       var mousex = e.pageX + 20; //Get X coordinates
       var mousey = e.pageY + 10; //Get Y coordinates
       jQuery('.tooltip')
           .css({
           top: mousey,
           left: mousex
       })
   });
  </code></pre>
  
  <p><strong>Working JSFIDDLE:</strong> <a href="http://jsfiddle.net/z3cnmf6p/1/" rel="nofollow">http://jsfiddle.net/z3cnmf6p/1/</a></p>
  
  <p><strong><em>Note: it is not jquery Ui tooltip.</em></strong></p>
  
  <p><strong>Problem:</strong> This script works fine but my requirement is to bind the hover function to a dynamically created element by jQuery for that purpose I tried jQuery .on() instead of .hover(), but it does not work:</p>
  
  <p>Here is what I have tried:</p>
  
  <p><a href="http://jsfiddle.net/vh5670cy/" rel="nofollow">http://jsfiddle.net/vh5670cy/</a></p>