jQuery: clicking nested elements
<p>I have the following markup</p>

<pre><code>&lt;ol&gt;
    &lt;li class="ListItem"&gt;
        &lt;span class="sub"&gt;@qItem.CategoryText&lt;/span&gt;
        &lt;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" /&gt;
    &lt;/li&gt;
&lt;/ol&gt;
</code></pre>

<p>and the following script</p>

<pre><code>$(".ListItem").click(function(){
doActionA();
});

$(".deleteIcon").click(function(){
doActionB();
});
</code></pre>

<hr>

<p>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 ?</p>
