jQuery: cliccando elementi annidati

Question

ho il markup

<ol> 
    <li class="ListItem"> 
     <span class="sub">@qItem.CategoryText</span> 
     <input type="image" src="http://icons.iconarchive.com/icons/tatice/just-bins/256/bin-red-full-icon.png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" /> 
    </li> 
</ol> 

e il seguente script

$(".ListItem").click(function(){ 
doActionA(); 
}); 

$(".deleteIcon").click(function(){ 
doActionB(); 
}); 

---

quando clicco in immagine, si innesca anche un clic del ListItem seguenti. Capisco questo perché l'immagine è all'interno di ListItem. ma voglio che il clic di ListItem non venga attivato quando si fa clic sull'immagine. C'è un modo per farlo?

Answer 1

$(".deleteIcon").click(function(e){ 
    doActionB(); 
    e.stopPropagation(); 
}); 

Answer 2

È necessario utilizzare event.stopPropagation() per impedire all'evento di ribollire nell'albero DOM.

$(".deleteIcon").click(function(event){ 
    event.stopPropagation() 
    doActionA();  
}); 

L'evento si rilegata con l'icona di eliminazione è sparare l'evento genitore vincolante con ListItem, quindi è necessario fermare la propagazione per l'evento genitore quando il bambino è fonte di evento.

Answer 3

$(".deleteIcon").click(function(){ 
    doActionA(); 
    return false; 
}); 

Answer 4

Usa .one(), come indicato nella documentazione JQuery.

Answer 5

$(document).on("click", ".deleteIcon", function() { 
    doActionB(); 
}); 

Questo metodo è l'unico che ho trovato a lavorare con gli elementi annidati, in particolare quelli generati da una libreria come la tabella pivot (https://github.com/nicolaskruchten/pivottable)