mouseover事件上的多个元素而不是单个元素

Question

JSFiddle： http://jsfiddle.net/357nf0ht/4/

如果您正在悬停其中一个.item，则会出现一个菜单。将鼠标悬停在“X”上会显示一个按钮。 我希望，悬停按钮会创建一个临时项目，属于第一个选定的.item。但是，如果你在开始时徘徊了超过一个.item，那么有多个临时项目。似乎this还记得过去的事件。

我不明白这种行为。

$(document).on('mouseenter', '.item', function (event) {
    var item = $(this);
    $('#item_add').css({
        "left": '5.5em',
        "top": item.offset().top - 15
    }).show();

    $('#item_add').hover(function () {
        var menue = $(this);
        menue.animate({
            "width": '7em',
            "left": '0.5em'
        }, 200, function () {
            $(this).find(".body").stop().slideDown(200);
        });
    }, function () {
        var menue = $(this);
        menue.find(".body").stop().slideUp(200, function () {
            menue.animate({
                "width": '2em',
                "left": '5.5em'
            }, 200);
        });
    });

    $('#item_element_new').hover(function () {
        item.after('<div id="item_new"></div>');
    }, function () {
        $('#item_new').remove();
    });
});

Answer 1

这种情况正在发生，因为每次您在mouseenter上触发 .item 时，会将新事件附加到按钮。

快速解决方案：您必须删除之前的活动才能添加新活动，您可以使用.unbind()执行此操作，此处为{{3} }

$('#item_element_new').unbind();
$('#item_element_new').hover(function () {

＆＃13;

＆＃13;

$(document).on('mouseenter', '.item', function (event) {
    var item = $(this);
    $('#item_add').css({
        "left": '5.5em',
        "top": item.offset().top - 15
    }).show();

    $('#item_add').hover(function () {
        var menue = $(this);
        menue.animate({
            "width": '7em',
            "left": '0.5em'
        }, 200, function () {
            $(this).find(".body").stop().slideDown(200);
        });
    }, function () {
        var menue = $(this);
        menue.find(".body").stop().slideUp(200, function () {
            menue.animate({
                "width": '2em',
                "left": '5.5em'
            }, 200);
        });
    });
    $('#item_element_new').unbind();
    $('#item_element_new').hover(function () {
        item.after('<div id="item_new"></div>');
    }, function () {
        $('#item_new').remove();
    });

});

＆＃13;

.item {
	border: 1px solid #e2e2e2; 
	margin: 6px;
	padding: 0px 10px 0px 10px;
	position: relative; 
    height: 40px;
	}
.wrap {
    margin-left: 8em;
}
#item_new {
    border: 1px dashed #C0C0C0 !important;
    background: none repeat scroll 0% 0% #F7F7F7;
    display: block;
    height: 2.2em;
    margin: 6px;
    padding: 0px 10px;
    position: relative;
}
#item_add {
    display: none;
    position: absolute;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;
}
#item_add .body {
    display: none;
}
#item_add .arrow {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}
#item_add button {
    background: none repeat scroll 0px center #fff;
    padding: 0.2em 2em;
    margin: 3px .2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="item_add">
    <header>X</header>
    <div class="body">
        <button id="item_element_new">Example</button>
    </div>
    <div class="arrow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

---

Soulution 2：由于@Regent指出您的代码有一些问题，您可以解决其中的一部分：

1. 在mouseenter事件处理程序

之外移动事件绑定

2. working example

3. 不再使用.unbind()

＆＃13;
＆＃13;
var $itemAdd = $('#item_add');
var $menuBody = $itemAdd.find(".body")
var $item = $('.item');

$itemAdd.hover(function () {
    $itemAdd.animate({
        "width": '7em',
        "left": '0.5em'
    }, 200, function () {
        $menuBody.stop().slideDown(200);
    });
}, function () {
    $menuBody.stop().slideUp(200, function () {
        $itemAdd.animate({
            "width": '2em',
            "left": '5.5em'
        }, 200);
    });
});

$('#item_element_new').hover(function () {
    $('.item-hovered').after('<div id="item_new"></div>');
}, function () {
    $('#item_new').remove();
});
   
$item.mouseenter(function (event) {
    var $currentItem = $(this);
     $currentItem.addClass('item-hovered');
     $currentItem.siblings().removeClass('item-hovered');
    
    $itemAdd.css({
        "left": '5.5em',
        "top":  $currentItem.offset().top - 15
    }).show(); 
});
＆＃13;
.item {
	border: 1px solid #e2e2e2; 
	margin: 6px;
	padding: 0px 10px 0px 10px;
	position: relative; 
    height: 40px;
	}
.wrap {
    margin-left: 8em;
}
#item_new {
    border: 1px dashed #C0C0C0 !important;
    background: none repeat scroll 0% 0% #F7F7F7;
    display: block;
    height: 2.2em;
    margin: 6px;
    padding: 0px 10px;
    position: relative;
}
#item_add {
    display: none;
    position: absolute;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;
}
#item_add .body {
    display: none;
}
#item_add .arrow {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}
#item_add button {
    background: none repeat scroll 0px center #fff;
    padding: 0.2em 2em;
    margin: 3px .2em;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="item_add">
    <header>X</header>
    <div class="body">
        <button id="item_element_new">Example</button>
    </div>
    <div class="arrow"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

最容易解决的问题，原因是@ erik-philips said：

$(document).on('mouseenter', '.item', function (event) {
    var item = $(this);
    $('#item_add').css({
        "left": '5.5em',
        "top": item.offset().top - 15
    }).show();
    $('#item_element_new').data('hovering_item', item);
});

$('#item_add').hover(function () {
    var menue = $(this);
    menue.animate({
        "width": '7em',
        "left": '0.5em'
    }, 200, function () {
        menue.find(".body").stop().slideDown(200);
    });
}, function () {
    var menue = $(this);
    menue.find(".body").stop().slideUp(200, function () {
        menue.animate({
            "width": '2em',
            "left": '5.5em'
        }, 200);
    });
});

$('#item_element_new').hover(function () {
    var item = $('#item_element_new').data('hovering_item');
    item.after('<div id="item_new"></div>');
}, function () {
    var item = $('#item_element_new').data('hovering_item');
    $('#item_new').remove();
});

.item {
	border: 1px solid #e2e2e2; 
	margin: 6px;
	padding: 0px 10px 0px 10px;
	position: relative; 
    height: 40px;
	}
.wrap {
    margin-left: 8em;
}
#item_new {
    border: 1px dashed #C0C0C0 !important;
    background: none repeat scroll 0% 0% #F7F7F7;
    display: block;
    height: 2.2em;
    margin: 6px;
    padding: 0px 10px;
    position: relative;
}
#item_add {
    display: none;
    position: absolute;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;
}
#item_add .body {
    display: none;
}
#item_add .arrow {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}
#item_add button {
    background: none repeat scroll 0px center #fff;
    padding: 0.2em 2em;
    margin: 3px .2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="item_add">
    <header>X</header>
    <div class="body">
        <button id="item_element_new">Example</button>
    </div>
    <div class="arrow"></div>
</div>