Question

Edit : Problem wasn’t related Event Propagation, if you want to know how to stop propagation in jQuery, then use event.stopPropagation();

When user moves his/her mouse over <span> element my jQuery code appends an <img>into this <span> element and when he moves out his mouse off <span> than the element appended is removed. It helps people to edit the field when clicking on the appended <img> element.

The reason I used append() method to add <img> into <span> is because I want to keep <img> element visible when user moves his mouse over to appended <img> element (<img> is becoming <span>‘s child element) But it didn’t happen and when user moves his mouse over it <img> is being deleted. I am thinking it is because event propagation but I couldn’t find how to activate it in jQuery as we do with addEventListener in Firefox based browsers.

Here is the code :

JQuery Code :

$(document).ready(function() {
    $('.EditEnabled').bind("mouseover", ShowEditFields);
    $(".EditEnabled").bind("mouseout", HideEditFields);
});

function ShowEditFields(event) {    
    $(event.target).append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px'/>");
}

function HideEditFields(event) {
    $(event.target).children("#editImg").remove();
}

Simple HTML :

<span id="something" class="EditEnabled">Something Here</span>

Can you explain my how to solve it.

Thank you.

Answer 1

You want to use the jQuery mouseenter and mouseleave events, not mousover and mouseout. The reason is that mouseout will fire when you move the mouse over the img.

Thankfully, jQuery combines this into a hover method:

$(document).ready(function() {
     $('.EditEnabled').hover(ShowEditFields, HideEditFields);
});

However I agree with the other answer that you should use CSS to do this vs. manipulating the DOM. I would just use the :hover pseudo selector, and then add special support for IE6.

CSS

span.EditEnabled img { display: none }
span.EditEnabled:hover img,
span.EditEnabled.hover img { display: block }

Make sure you have the img in the span in your HTML to begin with, and that is all you need for most browsers and IE7+

To support IE6 add:

<!--[if lte IE 6]>
<script type="text/javascript">
$(function(){
  $(".EditEnabled").hover(
    function(){ $(this).addClass('hover') },
    function(){ $(this).removeClass('hover')}
  );
});
</script>
<![endif]-->