title: jQuery: clicking nested elements
body: <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>