Getting mouse events to function on dynamically loaded elements
<p>I have a simple mouseover event that I am trying to work on elements that are loaded with ajax.  For example I have a div that when you mouseover hide/show another div.  When I load these divs through ajax they no longer work.  For example :</p>

<pre><code>&lt;div class="block"&gt;
    &lt;div class="something"&gt;MOUSEOVER&lt;/div&gt;
    &lt;div class="else" style="display: none" &gt;HI&lt;/div&gt;
&lt;/div&gt;

$(document).ready(function(){
    //using on hoping to catch the mouse events
    $('.block').on('mouseenter',function(){
        $(this).children('.else').fadeIn('fast');
    });
    $('.block').on('mouseleave',function(){
        $(this).children('.else').fadeOut('fast');
    });
});
</code></pre>

<p>This works fine straight up like <a href="http://jsfiddle.net/RwZWP/" rel="nofollow">this</a> : </p>

<p>But when I load those elements from another page :</p>

<pre><code>$j('#trigger').load( url + " .block");
</code></pre>

<p>The mouse events are no longer recognized.  I thought this is what <code>live</code>, <code>on</code>, <code>delegate</code> were for.  Can someone help me figure this out please.</p>
