选择特定的li到div

Question

我在div中有一个列表，我想用jQuery捕获特定'li'上的click事件。

我的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点击：

$('ul.ul-area li').click(function() {
        $('.campos-para-filtrar').empty();
        filtroaniadir = $(this).attr("id");
        aniadirFiltro(filtroaniadir);
        cargarFiltros();        
    });

但是当我点击li时，jQuery会捕获<div class="lista-select lista-area"> click而不是li click。

任何人都可以给我任何想法吗？

Answer 1

捕获对包含li元素的元素的引用，然后使用find()函数捕获所有li元素。 将click()函数绑定到每个函数并使用this关键字通过使用attr函数记录clicked元素的特定id。

 $('.lista-select').find('li').click(function() { console.log($(this).attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

您的click事件很可能发生在李的孩子li 。 您需要首先使用.closest()找到li 。 我还建议使用.on()而不是.on() .click() ：

$('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);
    // ...
});

这样，您只需绑定一次父项，而不是每个子项一次。 使用上面的语法，你的点击也将在未来的工作li ，你可以添加以后s表示，采用$.ajax() 。 它是一种通用且强大的结构，可以用于任何事件，而不仅仅是click 。

Answer 3

如果你需要一个版本而不必使用jquery

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