Question

my mouseleave is not working in my jquery code

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

providing my js code below

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

Answer 1

The problem isn’t with the mouseleave listener, the problem is how you’re binding those event handlers and unbinding them for that matter. The div was being removed, but it was being readded with every mouseenter event. For some reason the mouseenter event wasn’t being unbound when using the selector filter for .on(). It probably has something to do with the way 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.

Now, I’m not 100% sure why just yet, but either way it will work if you use directly-bound handlers like so:

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

See: http://jsfiddle.net/9Dr7T/35/