jQuery mouseenter and mouseleave not working correctly after .append()
<p>I have a <code>div</code> object that is set to visible in a mouseover event, via jQuery. Inside this div I have a clickable element that runs a Javascript function, which loads HTML content from another file via <code>$.get()</code>.</p>

<p>The problem is that my <code>div</code> is hidden automatically when I move my mouse over the newly added content, after the $.get() method is done. I've seen that a <em>mouseout</em> event is called on the newly added content.</p>

<p>Here is the part of my code:</p>

<p><strong>HTML</strong>:</p>

<pre><code>&lt;div class="tab"&gt;
  &lt;div id="tab_content"&gt;
    Content...
    &lt;div id="more_container"&gt;
      More content goes here:
      &lt;a onclick="load_more(this)"&gt;Load more content&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p><strong>Javascript</strong>:</p>

<pre><code>$(".tab").on({
    mouseenter: function(){
        show();
    },
    mouseleave: function(){
        hide();
    }
}, "#tab_content");


function load_more(object) {
    $.get('/url/file', function(data){
        var div = $(object).parent();
        $(object).remove();
        $(div).append(data);
    });
}
</code></pre>
