動態添加div影響容器mouseover和mouseout事件

Question

這是我的代碼。請檢查它。這個問題使我瘋狂的是，爲什麼鼠標事件被觸發，如果我將鼠標移動到克隆div funCudDiv即使它在divContainer。 因此，如果你懸停在funCudDiv你會看到所有的東西都閃爍。

請幫幫我。謝謝。

<!-- language: lang-js --> 
<style type="text/css"> 
     .canSelectedNodeHover 
     { 
      background-color: #E8F0F5; 
     } 
</style> 

<script language="javascript" type="text/javascript"> 
    $(function() { 
     var foundDiv = $("#divContainer"); 
     foundDiv.mouseover(function() { 
      var cloneDiv = $("#divRight").clone(); 
      cloneDiv.attr('id', 'funCudDiv'); 
      $("#divContainer").append(cloneDiv); 
      $("#divContainer").addClass("canSelectedNodeHover"); 
     }).mouseout(function() { 
      $("#divContainer").removeClass("canSelectedNodeHover"); 

      $("#funCudDiv").remove(); 
     }); 
    }); 
    </script> 
<div id="divContainer" style=" border:1px solid black; width:400px; height:400px"> 
</div> 

<div id="divRight" style="border:1px solid blue;width:200px; height:20px; float:right;"> 
</div> 

編輯

所有。如果所有html元素都是預先添加的，而不是使用clone。一切安好 。請注意，謝謝。

Answer 1

使用mouseenter和mouseleave事件，而不是，防止處理程序被觸發時，容器內你跨邊界：

$(function() { 
    var foundDiv = $("#divContainer"); 
    foundDiv.mouseenter(function() { 
     var cloneDiv = $("#divRight").clone(); 
     cloneDiv.attr('id', 'funCudDiv'); 
     $("#divContainer").append(cloneDiv); 
     $("#divContainer").addClass("canSelectedNodeHover"); 
    }).mouseleave(function() { 
     $("#divContainer").removeClass("canSelectedNodeHover"); 

     $("#funCudDiv").remove(); 
    }); 
}); 

這裏是一個演示：http://jsfiddle.net/cRnBx/