jquery - 鼠标进入时动态创建的元素。（意外触发鼠标退出事件）

Question

我想要工具栏，其中从具有 class 的 div 中检测到 mouse-out/in 事件container。和事件按预期工作mouseover。mouseout当鼠标移入和移出元素及其后代时会触发这些事件。但是没想到的事情发生了：新创建的div在鼠标移动到自己的时候就被删除了，删除后又触发了mouseover事件，于是又创建了一个新的div，让人眼花缭乱。任何遇到过这种问题的人请帮助我。谢谢。

假设你有这个 HTML：

<div id='parent' class="parent container">
    <div id="child1" class="child container">
    </div>
    <div id="child2" class="child container">
    </div>
</div>

而且，这个 JavaScript：

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

使用 CSS：

.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;

}

Answer 1

我发现了问题，它在你的 CSS 中。添加相对位置。否则它假定第一个具有相对位置。

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

看看http://jsfiddle.net/Jn7e2/

哦，您在 append 函数后面没有分号。这将克服任何其他问题。

Answer 2

也许您需要使用 show() 和 hide() 来聚焦 div，因为从子级传播到父级的事件可能存在问题。那这个呢：

http://jsfiddle.net/Jn7e2/1/

<div id='parent' class="parent container">
    <div id="child1" class="child container">
        <div class="newdiv" style="display:none">
        </div>
    </div>
    <div id="child2" class="child container">
        <div class="newdiv" style="display:none">
        </div>
    </div>
</div>

• JS：

    $（函数（）{
      $('div.container').on('mouseover', function(e){

      e.stopPropagation();
          $(this).children(".newdiv").show();
          console.log("进入" +$(this).attr('id'));
       }).on('mouseout', function(e){
           e.stopPropagation();
           $(".newdiv",this).hide();
           console.log("out from " + $(this).attr('id'));
       })
     });

Answer 3

总而言之，我确实找到了一种方法，但它非常冗长而且看起来很紧迫......任何人都可以提供更好的方法来让它更容易和有趣......希望。谢谢。

$(function() {
    $('div.container').mouseenter(function(e){
        e.stopPropagation();
        $(this).css("border","2px solid red");
        $(this).append("<div class='newdiv'></div>"); 
        $(this).parents().each(function(){
            if ($(this).children(".newdiv").length>0)
            {
                $(this).children(".newdiv").remove();
                $(this).css("border","1px solid red");
            }
        });
        if ($(".newdiv",this).length==0)
         {
            //alert('ddd');

         }

        console.log("into " +$(this).attr('id'));
    }).mouseleave( function(e){
        $(".newdiv",this).remove();
        if ($(this).parent().hasClass("container") && $(".newdiv",$(this).parent()).length==0)
        {
            $(this).parent().css("border","2px solid red");
            $(this).parent().append("<div class='newdiv'></div>"); 
        }

        $(this).css("border","1px solid red");
        console.log("out from  " + $(this).attr('id'));
    });
});