des événements Application Handler à Éléments enfants (Propogation événement jQuery)

Question

Edit: problème n'a pas été lié de propagation de l'événement, si vous voulez savoir comment arrêter la propagation dans jQuery, puis utilisez event.stopPropagation();

Lorsque l'utilisateur déplace sa souris sur <span> élément mon code jQuery ajoute un <img> dans cet élément <span> et quand il déplace sa souris sur <span> que l'élément ajouté est supprimé. Il aide les gens à modifier le champ en cliquant sur l'élément <img> ajouté.

La raison pour laquelle je append() méthode pour ajouter <img> dans <span> est parce que je veux garder élément <img> visible lorsque l'utilisateur déplace sa souris sur joint élément <img>(<img> devient <span> « élément enfant s) Mais il n » t se produit et lorsque l'utilisateur déplace sa souris dessus <img> est en cours de suppression. Je pense que c'est parce que la propagation d'événements, mais je ne pouvais pas trouver comment l'activer dans jQuery comme nous le faisons avec addEventListener dans les navigateurs basés sur Firefox.

Voici le code:

code JQuery:

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

HTML simple:

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

Pouvez-vous expliquer ma façon de le résoudre.

Merci.

Answer 1

Vous souhaitez utiliser les événements jQuery mouseenter et mouseleave, et non mousover et mouseout. La raison est que mouseout tirera lorsque vous déplacez la souris sur le img.

Heureusement, jQuery combine ceci dans une méthode hover:

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

Cependant Je suis d'accord avec l'autre réponse que vous devez utiliser CSS pour le faire par rapport à la manipulation du DOM. Je voudrais simplement utiliser le pseudo-sélecteur :hover, puis ajouter un support spécial pour IE6.

CSS

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

Assurez-vous de l'img en l'espace dans votre code HTML pour commencer, et qui est tout ce que vous avez besoin pour la plupart des navigateurs et IE7 +

Pour soutenir IE6 ajouter:

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

Answer 2

Tout d'abord, j'éviterais autant de manipulations DOM que possible. Le scénario idéal est de construire votre balisage comme ceci:

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

avec CSS:

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

et Javascript:

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

Cela devrait à peu près le faire. J'éviterais les effets de jQuery car rendre les choses visibles les fera bloquer des éléments de niveau plutôt qu'inline comme vous voulez.

Answer 3

J'ai trouvé une autre réponse en fait, comme je le cherche. Ce n'est peut-être pas une bonne pratique, mais au moins, j'ai découvert comment résoudre ce problème.

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