Remove hover with on()
<p>I would like to have both a hover and remove hover event.  The nodes which have this event are added dynamically, so I wish to use on().  When adding a hover event, it works great (the #second list below).  For some reason when I add the off hover event, not even the add hover event will work (#first list below).</p>

<p>Please provide any clues.  A live example is located at <a href="http://jsfiddle.net/NV7hR/" rel="nofollow">http://jsfiddle.net/NV7hR/</a></p>

<p>Thanks</p>

<pre><code>$(document).ready(function() {
  $("#first").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  }, function(event) {
    $(this).parent().css("background-color", "");
  });
  $("#second").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  });
});

&lt;body&gt;
&lt;ul id="first"&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="second"&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"/&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
</code></pre>
