jQuery: klikający elementy zagnieżdżone

Question

Mam następujący znaczników

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

i następnego skryptu

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

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

---

Po kliknięciu w obrazek, ale także wywołuje kliknięcie ListItem. Rozumiem, że dzieje się tak dlatego, że obraz znajduje się wewnątrz ListItem. ale chcę, aby kliknięcie ListItem nie było uruchamiane po kliknięciu obrazu. Czy jest jakiś sposób to zrobić?

Answer 1

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

Answer 2

Musisz użyć event.stopPropagation(), aby zapobiec propagacji zdarzenia w drzewie DOM.

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

Impreza ty zbindowanych z ikonie Usuń jest wypalania zdarzenie nadrzędnej wiązania z ListItem, więc trzeba zatrzymać propagacji dla zdarzenia dominującej gdy dziecko jest źródłem zdarzenia.

Answer 3

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

Answer 4

Zastosowanie .one(), w sposób opisany w dokumentacji JQuery.

Answer 5

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

Ta metoda jest tylko jeden znalazłem pracę z elementów zagnieżdżonych, zwłaszcza generowane przez biblioteki takie jak tabel przestawnych (https://github.com/nicolaskruchten/pivottable)