javascript - 为什么当我点击 li 时会触发 ul？

Question

我有这个 html:

 <ul class='loc-list'>  
     <li id="where_7" class="cont-list">North America
         <ul>
            <li id="contry_114" class="contry-list">canada</li>
            <li id="contry_115" class="contry-list">mexico</li>
            <li id="contry_117" class="contry-list">united states</li>
         </ul>
     </li>
 </ul>

现在我写了两个 jquery 函数 onclick of list 为:

1^st:

$(".cont-list").on("click", function(event){
     alert("clicked on continent's list"); // working fine
 };

第二:

$(".contry-list").on("click", function(event){
     alert("clicked on country's list");  // not working!
 };

在这里，当我点击 cont-list 时，它应该被称为 ones ，但在 2^nd 函数中它是 没有被调用，而是 1^st 函数被调用!

是因为它是一个内部列表吗？如果是这样，那么如何处理它以便仅在单击该列表时才调用它？

The demo is here

提前致谢!

Answer 1

那是因为事件冒泡了，可以使用event对象的stopPropagation方法:

$(".contry-list").on("click", function(event){
     event.stopPropagation();
     alert("clicked on country's list");  
});

如果您正在动态生成 li 元素，您应该委托(delegate)事件:

$(document).on('click', '.coutry-list', function(){
   console.log('li element is clicked');
})