javascript - 如何删除 mouseleave 上 append 的工具栏到主体或其他元素？

Question

在我之前的question中回答者 Jivings没有给出完整的信息，我对他的回答有疑问。当我 mouseenter 一个元素时，工具栏会 append 到该元素，但是当我将鼠标从工具栏离开到body(或另一个元素，但不是当前版本!)，工具栏不会消失。如何删除 mouseleave 上的工具栏到正文？

var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');  
toolbar.on('mouseleave',function(e){
    toolbar.remove();
});    

var enter = function(e) {

    setTimeout(function(){
        toolbar.addClass('widget-over');
    },100);

    $('body').prepend(toolbar);

    toolbar.css({
        left: $el.offset().left,
        top: $el.offset().top - toolbar.height() - 20
    });    
};

var leave = function(e){
    if ($(e.relatedTarget).closest(toolbar).length) return;
    toolbar.removeClass('widget-over');
    toolbar.remove();
}

var $el = $('.el')
    .on('mouseenter', enter)
    .on('mouseleave', leave);

问题 fiddle -> http://jsfiddle.net/3r8wrumL/7/

Answer 1

使用新类和绑定(bind)动态删除和添加元素。

$(function () {
var toolbar = $('<div class="toolbar"><span>leave toolbar to body and mouseenter element again</span></div>');   

var enter = function(e) {
    console.log('enter')
    setTimeout(function(){
        toolbar.addClass('widget-over');
    },500);

    $('body').prepend(toolbar.on('mouseleave',function(e){ 
        $(this).removeClass("widget-over");
        $(this).remove();        
        console.log('toolbar out');
    }));

    toolbar.css({
        left: $el.offset().left,
        top: $el.offset().top - toolbar.height() - 20
    });  


};

var leave = function(e){
    if ($(e.relatedTarget).closest(toolbar).length) return;
    toolbar.removeClass('widget-over');
    toolbar.remove();
}

var $el = $('.el')
    .on('mouseenter', enter)
    .on('mouseleave', leave) ;
});