Question

I am using this syntax option for jquery hover.

Here is my code:

$('mySelector')
    .hover(
        function(){
            $(this).html('<img src="images/myImage2.png" height="23" width="24" />');
        },
        function(){
            $(this).html('<img src="images/myImage1.png" height="23" width="24" />');
        }
    );

The original text for the element referenced by mySelector is the mouseleave option – $(this).html('<img src="images/myImage1.png" height="23" width="24" />');

The first handler, for mouseenter/mouseover, is working correctly. But the second handler, for mouseleave/mouseout (which should restore the original image), never executes. When I trace it in firebug, the mouseover event is triggered, but the second “function()” is not reached.

Edit:

For clarity, my html code is something like this:

<div id="results">
   <span class="imageClass"><img src="images/myImage1.png" height="23" width="24" /</span>
</div>

And then my selector is "#results .imageClass"

Answer 1

The reason for this problem could be that the element which triggered the mouseenter event (i.e. the <img> node) is removed from the DOM before it can trigger the mouseleave event. The event is caught and handled by mySelector‘s event handler, but the <img> is the actual source of the event. It would therefore make sense that the mouseleave event is not triggered by the new <img>, because the mouse never entered it in the first place.

To clarify: the DOM node to which the event handler is bound (mySelector) is not the same as the node which first triggers the event (the <img>). Because the <img> has no handler of its own for this event, the event will bubble up through the DOM tree until it encounters a node which does (in this case, mySelector).

It turns out that adeneo’s solution does work, despite the fact that his/her answer was inaccurate. Here is a working example: jsbin.com/ikolog.

Helpful resources:

• DOM Events (MDN)
• Event Propagation Example (MDN)
• How to Stop Event Propagation (MDN)