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

Question

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

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

在下面提供我的js代码

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

Answer 1

问题不在于 mouseleave 监听器，问题在于您如何绑定(bind)这些事件处理程序并取消绑定(bind)它们事情。 div 被删除，但每次 mouseenter 事件都会读取它。由于某种原因，在使用 .on() 的 selector 过滤器时，mouseenter 事件并未解除绑定(bind)。可能和方式有关bubbling occurs when using the selector filter .

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

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

$('.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/