如何将鼠标左键上附加的工具栏删除到主体或其他元素

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

本文关键字：删除 工具栏 主体 元素 其他 鼠标      更新时间：2023-09-26

在我之前的问题中，Jivings没有给出完整的答案，我对他的答案有问题。当我mouseenter一个元素时，一个工具栏会附加到此元素，但当我将鼠标从工具栏移到主体（或另一个元素，但不是当前元素！）时，工具栏不会消失。如何将鼠标上的工具栏移到正文？

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

问题小提琴->http://jsfiddle.net/3r8wrumL/7/

动态移除和添加具有新类和绑定的元素。

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

请替换您的此代码

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

问题是，您在第一次将工具栏准备到正文中时，就将事件绑定到了工具栏上。

正确的方法是用新的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) ;

})；

希望它能有所帮助！

相关文章：