why double append of popup div
<p>hi i have following code </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"&gt;
&lt;head&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
.card {
border:1px solid transparent;
cursor:pointer;
float:left;
height:136px;
margin:10px;
padding:3px;
width:136px;

}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--    &lt;div id="popupContact"  style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;"&gt;
    &lt;/div&gt; --&gt;
&lt;div class="card  ui-corner-all" id="card-208"&gt;   

    &lt;div class="card-name"&gt;    Rahul1's Gib 1       &lt;/div&gt;   
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script  type='text/javascript'&gt;
$(document).ready(function(){
    var popup_pos=$('#card-208').offset();
    var timer;
    $("#card-208").mouseenter(function() {
        if($("#divtoshow").length==0){
           $("#card-208").append('&lt;div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;"&gt;'+
         'dsfdssd &lt;a href="#"&gt;rahul&lt;/a&gt;'+
         '&lt;/div&gt;')
         }
            $("#divtoshow").css('position',"absolute");
            $("#divtoshow").css('top',popup_pos.top-120);
            $("#divtoshow").css('left',popup_pos.left-120);
            //~ $("#divtoshow").show();
     });    
    $("#divtoshow").live('mouseleave', function() {

            $(this).remove();

         });
});
&lt;/script&gt;
</code></pre>

<p>Q why on mouseleave the divtoshow is not hiding it hide when i again mouseover it .</p>

<p>regards</p>

<p>rahul</p>
