当我点击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 ^日:

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

2 ^次:

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

在这里,当我点击CONT列表它被调用者,因为它应该,但在2 ^次功能,有没有得到所谓而是1 ^日函数被调用!

是因为它是一个内在的名单？如果是这样,那么如何处理这个问题,以便只有在点击该列表时才会调用它？

演示就在这里

提前致谢!

Answer 1

那是因为事件冒出来了,你可以使用对象的stopPropagation方法event:

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

如果要li动态生成元素,则应委派事件:

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