title: Trigger event on div's content which has event
body: <p>I have div with event click on it to do something on click, and that div contain list of items, each item has an event too.
  What I'm trying to do is that trigger only the event for the clicked item, not both item and it's container's event. <a href="http://jsfiddle.net/3pnxx9h3/1/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul&gt;
          &lt;li&gt;action 1&lt;/li&gt;
          &lt;li&gt;action 2&lt;/li&gt;
          &lt;li&gt;action 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  
  $('.container').click(function(){
     var x = document.getElementById('result');
      $(x).append(' container clicked');
  });
  
  $('.container ul').on('click','li',function(e){
      e.preventDefault();
     var x = document.getElementById('result');
      $(x).append(' li clicked');
  });
  </code></pre>