Event delegates and prevent bubbling prevent parent element events from firing

Just a quick word about event delegation and preventing bubbling

HTML:

<ul class="clearfix" data-type="cityPick"> 
<li class="active_sort_opts" data-id="0"> all </li> 
<li data-id="88"> New York, </li> 
<li data-id="119"> Los Angeles, </li> 
<li data-id="138"> Las Vegas </li> 
<li data-id="84"> Hawaii </li> 
<li data-id="120"> San Francisco </li> 
<li data-id="105"> Orlando, </li> 
<li data-id="118"> In Seattle, </li> 
</ul>

Js:

$("ul[data-type='cityPick']").on('click',function(){ 
alert(" The parent element ul By clicking "); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(){ 
alert(" Child elements li By clicking "); 
});

When the specific li element is clicked, the ul event is also triggered, which we do not want to see.

Solution:

$("ul[data-type='cityPick']").on('click',function(){ 
alert(" The parent element ul By clicking "); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(e){ 
e.stopPropagation();//To prevent a bubble
alert(" Child elements li By clicking "); 
});

Add a word to stop the bubbling.