Event delegate and prevent bubbles from triggering its parent element event

Simply talk about the commissioning of events and preventing bubbles

html:

 <ul data-type="cityPick"> <li 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">Seattle</li> </ul>

js:

 $("ul[data-type='cityPick']").on('click',function(){ alert("parent element ul is clicked"); }); $("ul[data-type='cityPick']").on('click','li',function(){ alert("child element li is clicked"); });

When clicking on the specific li element, the event of ul is found to be triggered, which is something we don't want to see.

solve:

 $("ul[data-type='cityPick']").on('click',function(){ alert("parent element ul is clicked"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//Stop bubble alert("child element li is clicked"); });

Just add a sentence to stop bubbles.