title: jquery:binding a hover event with ajax loaded content
body: <p>I'm using jQuery to try and bind some newly loaded <code>&lt;li&gt;</code> elements with <code>.hover()</code> and I'm kind of stuck. At the moment I'm reloading the content in a <code>&lt;ul&gt;</code> with ajax and there's a hover event with <code>.hover();</code> on the <code>&lt;li&gt;</code>. The hover event works perfectly on the non-ajax-loaded content of course.</p>
  <p>I know I can use <code>mouseover</code>/<code>mouseout</code> to bind the event with <code>.live();</code> which is a good solution if it weren't for <code>mouseover</code>/<code>mouseout</code> bad habit to break the event if you hover a child element of the current element the mouseover is bound to. So the reason I'm using <code>.hover();</code> is because I can freely hover the children of my hover-bound element without the event being cancelled.</p>
  <p><code>bind();</code> doesn't seem to work at all either, so my question is.. Is there any use in trying to get ajax loaded <code>&lt;li&gt;</code> events bound and keep the hover effect as a <code>hover();</code>, or should I just roll over and use <code>mouseover</code>/<code>mouseout</code> with <code>live();</code> and try and solve the hover children problem some other how?</p>
  <h3>Success Message:</h3>
  <pre><code>success: function(data){ 
             $('ul#list').bind().append(&quot;&lt;li&gt;test test&lt;/li&gt;&quot;);
           }
  </code></pre>