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
 };

2 ^第二

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

当我点击 cont-list 时，它会被调用，但在 2 ^nd 函数中它是不被调用而是 1 ^st 函数被调用！

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

The demo is here

提前致谢！

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');
})

Answer 2

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

Answer 3

需要使用event.stopPropagation()

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

Demo Here

Answer 4

jQuery中的修复方法是：

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

但正如epascarello指出的那样，你应该学习DOM事件冒泡（和捕获）来理解它。

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

4 个答案: