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">点击而不是点击。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的click事件最有可能发生在li的孩子身上。您需要先找到li .closest()。我还建议使用.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添加的任何$.ajax()。它是一种通用且强大的结构，适用于任何事件，而不仅仅是click s。

Answer 3

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

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

选择特定的li到div

3 个答案: