jquery - 动态添加的 div 影响容器 mouseover 和 mouseout 事件

Question

这是我的代码。请检查它。让我发疯的问题是，为什么如果我将鼠标移动到克隆的 div funCudDiv 上，即使它位于 divContainer 中，也会触发 mouseout 事件。所以，如果你将鼠标悬停在 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/