dynamically created element when mouse in. (trigger the mouse out event unexpectedly)
<p>I want to have toolbar, where mouse-out/in events are detected from divs that have the class <code>container</code>. The <code>mouseover</code> and <code>mouseout</code>events are working as expected. These events are triggered when the mouse moves in and out of elements AND it's descendants. But there is something not to be expected happened: The newly created div is removed when the mouse was moved on itself.and after removed it will trigger the <code>mouseover</code> event, So another new div is created.This makes it Dazzling. Anyone who ever encountered this kind of problem please help me. thanks.</p>

<p>Say you have this HTML:</p>

<pre><code>&lt;div id='parent' class="parent container"&gt;
    &lt;div id="child1" class="child container"&gt;
    &lt;/div&gt;
    &lt;div id="child2" class="child container"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And, this JavaScript:</p>

<pre><code>$(function() {
    $('div.container').on('mouseover', function(e){
        e.stopPropagation();
        $(this).append("&lt;div class='newdiv'&gt;&lt;/div&gt;")
        console.log("into " +$(this).attr('id'));
    }).on('mouseout', function(e){
        $(".newdiv",this).remove();
        console.log("out from  " + $(this).attr('id'));
    })
});
</code></pre>

<p>With CSS:</p>

<pre><code>.parent
{
    border:1px solid black;
    width:100%;
    height:400px;
}

.child
{
    float:left;
    width:40%;
    border:1px solid red;
    margin:1px;
    height:300px;
}

.newdiv{
    border:1px solid blue;
    margin:2px;
    width:100px;
    height:100px;
    position:absolute;
    right:0;

}
</code></pre>
