javascript - 选择特定的 li 到 div

Question

我在 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 click:

$('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">单击而不是 li 单击。

谁能告诉我任何想法？

Answer 1

您的click 事件很可能发生在li 的子项上。你需要先用.closest()找到li .我还建议使用 .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);
    // ...
});

这样一来，您只需在父项上绑定(bind)一次点击，而不是为每个子项绑定(bind)一次。使用上面的语法，您的点击也将适用于您以后可能使用 $.ajax() 添加的任何 future li。这是一个通用且强大的结构，适用于任何事件，而不仅仅是 click。