如何将 mouseleave 上的附加工具栏删除到 body 或其他元素？

Question

在我之前的 answer by Jivings 中没有给出完整的答案，我对他的回答有疑问。当我 mouseenter 一个元素时，工具栏被附加到这个元素，但是当我从工具栏鼠标离开到 body （或 another 元素，但不是当前！），工具栏不会消失。我如何将 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

请替换您的代码

toolbar.on('mouseleave',function(e){
    toolbar.remove();
});

使用此代码

$(document).on("mouseleave",".toolbar",function(){
    $(".toolbar").remove();
});

这里发生的是您的工具栏是通过 jquery 动态创建的。这就是不应用 mouseleave 事件的原因。

如果您想在每个动态创建的元素上应用事件，请使用以下语法。

$(document).on("eventname","selector",function(){
    // your code goes here
});

Answer 2

问题在于，您是在第一次将工具栏添加到主体中时绑定工具栏上的事件。

正确的方法是在工具栏前添加新的 onmouseleave 绑定。像这样。

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

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

    $('body').prepend(toolbar.on('mouseleave',function(e){        
        $(this).detach();        
        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) ;

});

希望对您有所帮助！

Answer 3

使用新的 class 和绑定动态删除和添加元素。

$(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) ;
});

如何将 mouseleave 上的附加工具栏删除到 body 或其他元素？

how to remove appended toolbar on mouseleave to body or another element?

javascript

jquery

append