Applying Events Handler to Child Elements (Event Propogation in jQuery)

Question

Hi Everyone,

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

Firstly, I would avoid as much DOM manipulation as you can. The ideal scenario is to construct your markup like this:

<span class="editEnabled">Some data<img ...></span>

with CSS:

span.editEnabled img { display: none; }
span.editEnabled img.visible { display: inline; }

and Javascript:

$(function() {
  $("span.editEnabled").hover(function() {
    $(this).children("img").addClass("visible");
  }, function() {
    $(this).children("img").removeClass("visible");
  });
});

That should pretty much do it.

I would avoid the jQuery effects as making things visible will make them block level elements rather than inline like you want.

Answer 2

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]-->

Answer 3

I've found another answer actually, the way I am looking for. It might not be a best practice but at least I've found out how to solve that.

$(document).ready(function() {
    //    $('.EditEnabled').bind("mouseenter", ShowEditFields);
    //    $(".EditEnabled").bind("mouseleave", HideEditFields);
    $(".EditEnabled").hover(ShowEditFields, HideEditFields);
});

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

function HideEditFields(event) {
    //    event.stopPropagation();
    //    if ($(event.relatedTarget).is("#editImg") == false)
    $(event.target).children("#editImg").remove();
}