jquery-ui - mouseleave 在 jquery 中不起作用

Question

我的 mouseleave 在我的 jquery 代码中不起作用

http://jsfiddle.net/alano/9Dr7T/29/

在下面提供我的 js 代码

mouseleave: function () {
    $(this).find("div:last").remove();
}

Answer 1

问题不在于mouseleave侦听器，问题在于您如何绑定这些事件处理程序并为此解除绑定。div 已被删除，但每个mouseenter事件都会读取它。由于某种原因，当使用选择器过滤器时 mouseenter 事件没有被解除绑定.on()。这可能与使用选择器过滤器时冒泡的方式有关。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最里面到最外面的元素），并为沿着该路径匹配选择器的任何元素运行处理程序。

现在，我还不是 100% 确定为什么，但无论哪种方式，如果您使用像这样的直接绑定处理程序，它都会起作用：

$('.specialHover').on({
    mouseenter: function() {
        $("<div class='cta'>add image</div>").click(function() {
            var $me = $(this);
            $me.parent().unbind('mouseenter').children('img').attr(
                'src', 
                'http://www.onlinegrocerystore.co.uk/images/goodfood.jpg'
            );
            $me.remove();
        }).appendTo(this);
    },
    mouseleave: function() {
        $(this).find('div:last').remove();
    }
});

见：http: //jsfiddle.net/9Dr7T/35/

Answer 2

您是否尝试过这种方式：

mouseleave: function () {
   $("div:last",this).remove();
}