Javascript 在div中选择特定的li

我在一个div中有一个列表，我想用jQuery捕捉特定“li”上的点击事件

我的html结构是：

<div class="select area-select">
  <div class="texto-select">Área</div>
  <div class="lista-select lista-area">
    <ul class="ul-area">
      <li id="0" class="li-area">
        <div class="circulo" style="border-color:#18549c"></div>
        <div class="textodesplegables texto-area">Nombre del área</div>
      </li>
      <li id="1" class="li-area">
        <div class="circulo" style="border-color:#8bca5b"></div>
        <div class="textodesplegables texto-area">Nombre del área</div>
      </li>
      <li id="2" class="li-area">
        <div class="circulo" style="border-color:#f9a61d"></div>
        <div class="textodesplegables texto-area">Nombre del área</div>
      </li>
    </ul>
  </div>
</div>

但是当我点击li时，jQuery捕获的是

点击，而不是li点击

---

有人能告诉我一些想法吗？

捕获对包含

li

元素的元素的引用，然后使用

find（）

函数捕获所有

li

元素。将

click（）


$（'.lista select'）。查找（'li'）。单击（函数（）{
console.log（$（this.attr（'id'））；
});

Área


诺姆布雷德拉雷亚酒店


诺姆布雷德拉雷亚酒店


诺姆布雷德拉雷亚酒店


您的
点击事件最有可能发生在
li
的孩子身上。您需要首先使用查找
li
。我还建议使用而不是
。单击（）
：

这样，您只需在父项上绑定一次单击，而不是为每个子项绑定一次。使用上面的语法，您的单击也将适用于以后可能使用
$.ajax（）
添加的任何
li
s。它是一个通用且健壮的结构，可以处理任何事件，而不仅仅是
单击
s.
如果您需要一个不需要使用jquery的版本

Array.prototype.slice.call(document.querySelectorAll('li'))
   .forEach(function(li){
      li.onclick = function(e){ 
         // onclick code here 
      }
   });

aniadirFiltro（）；cargarfilteros（）这些是什么？您需要将
单击
事件作为函数的参数传递。该事件将具有一个
.target
属性，该属性将引用单击的元素。使用
.closest（）
从单击的元素开始查找
li
。请注意，
.click（）
只是（'click'）
上的
.on的快捷方式。我建议您使用
.on（）
，以便更好地控制事件绑定；我们看不到什么不起作用，因为我们看不到您正在调用的函数，并且缺少
.campos para filter
元素。非常感谢。我试过了，效果很好，但我更喜欢用jQuery。
$('ul.ul-area').on('click', 'li', function(e) {
    var li = $(e.target).closest('li'),
        filtroaniadir = li.attr('id');
    console.log('ID of li is ' + filtroaniadir);
    // ...
});

Array.prototype.slice.call(document.querySelectorAll('li'))
   .forEach(function(li){
      li.onclick = function(e){ 
         // onclick code here 
      }
   });