Empêche le déclenchement de l'événement de l'élément enfant lors du clic sur le parent

Question

Le balisage est comme ci-dessous.

<span id="spnMenuContainer" class="Menu"> 
    <div id="divContainer" class="SubMenu">        
    <div id="BtnResubmit" class="basicbutton">Resubmit</div> 
    </div> 
</span> 

J'ai du code jquery dans mon projet comme celui-ci.

$("#spnMenuContainer").bind("click",function(e){ 
    /*---- 
    some other code here 
    -----*/ 
    $("#divMenuContainer").find("#BtnResubmit").bind("click",function(){ 
     UpdateAndRefreshTable('resub'); 
    }); 
    e.stopPropagation(); 
}); 

mais je suppose que la méthode stopPropagation ne fonctionne pas. Lorsque je clique sur la durée, la fonction UpdateAndRefreshTable est appelée. Comment éviter cela. J'ai besoin de la fonction pour travailler uniquement sur le clic divMenuContainer.

Answer 1

Vers le haut bouillonnement de l'événement à l'élément parent, ajouter une liaison à l'élément enfant et utiliser event.stopPropagation()

$("#BtnResubmit").on('click',function(e){ 
    e.stopPropagation(); 
    UpdateAndRefreshTable('resub'); 
}) 

Answer 2

Vous êtes contraignant en fait l'événement à spnMenuContainer, de sorte que l'événement stopPropagation() est réellement arrêter l'événement de bouillonnant de spnMenuContainer, pas de divMenuContainer.

Essayez la liaison à divMenuContainer et en utilisant à la place stopPropagation():

$('#BtnResubmit').on('click', function(e) { 
    e.stopPropagation(); 
    UpdateAndRefreshTable('resub'); 
}); 

Notez que vous n'avez pas besoin de la fonction find(). Les identifiants doivent être uniques, il devrait donc suffire d'utiliser simplement le sélecteur #BtnResubmit.

Answer 3

En fait, vous vous trompez. Avec le code actuel, vous enregistrez un événement pour l'élément enfant lorsque vous cliquez sur le parent.

Donc, si vous avez un événement lié au parent, vous devez utiliser event.stopPropagation() sur élément enfant pour arrêter l'événement à BubbleUp au parent comme ceci:

$("#spnMenuContainer").bind("click",function(e){ 
    /*---- 
    some other code here 
    -----*/ 
}); 

$('#BtnResubmit').on('click', function(ev) { 
    ev.stopPropagation(); 
    UpdateAndRefreshTable('resub'); 
}); 

il suffit de déplacer hors de l'événement click parent et mettez-le en dehors de cela.