I have the following markup

<ol>
    <li class="ListItem">
        <span class="sub">@qItem.CategoryText</span>
        <input type="image" src=".png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" />
    </li>
</ol>

and the following script

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

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

When I click in image, it also triggers click of ListItem. I understand this is because image is inside ListItem. but I want ListItem's click not to be fired when image is clicked. Is there any way to do that ?

I have the following 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>

and the following script

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

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

When I click in image, it also triggers click of ListItem. I understand this is because image is inside ListItem. but I want ListItem's click not to be fired when image is clicked. Is there any way to do that ?

• javascript
• jquery

5 Answers 5

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

You need to use event.stopPropagation() to prevents the event from bubbling up the DOM tree.

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

The event you binded with delete icon is firing the parent event binding with ListItem, so you need to stop propagation for parent event when child is source of event.

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

This method is the only one I found to work with nested elements, especially those generated by a library such as Pivottable (https://github.com/nicolaskruchten/pivottable)

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

Use .one(), as directed in the JQuery documentation.