title: Why ul gets triggered when I click on li?
body: <p>I have this html:</p>
  
  <pre><code> &lt;ul class='loc-list'&gt;  
       &lt;li id="where_7" class="cont-list"&gt;North America
           &lt;ul&gt;
              &lt;li id="contry_114" class="contry-list"&gt;canada&lt;/li&gt;
              &lt;li id="contry_115" class="contry-list"&gt;mexico&lt;/li&gt;
              &lt;li id="contry_117" class="contry-list"&gt;united states&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>Now I have written two jquery functions onclick of list as:</p>
  
  <p><strong>1<sup>st</sup>:</strong></p>
  
  <pre><code>$(".cont-list").on("click", function(event){
       alert("clicked on continent's list"); // working fine
   };
  </code></pre>
  
  <p><strong>2<sup>nd</sup>:</strong></p>
  
  <pre><code>$(".contry-list").on("click", function(event){
       alert("clicked on country's list");  // not working!
   };
  </code></pre>
  
  <p>Here when I click on <strong>cont-list</strong> it get called ones as it should , but in the <strong>2<sup>nd</sup></strong> function it is <strong>not</strong> getting called instead it <strong>1<sup>st</sup></strong> function get called!</p>
  
  <p>Is is because of it being an inner list? If so, then how to deal with this so that it will be called only when clicked on that list only?</p>
  
  <p><a href="http://jsfiddle.net/Sandip007/nuCPv" rel="nofollow"><strong>The demo is here</strong></a></p>
  
  <p>Thanks in advance!</p>