logo标签列表

选择特定的li元素放入div中。

javascriptjqueryhtmleventsclick
3
我有一个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 元素的点击事件：
$('ul.ul-area li').click(function() {
        $('.campos-para-filtrar').empty();
        filtroaniadir = $(this).attr("id");
        aniadirFiltro(filtroaniadir);
        cargarFiltros();        
    });

但是，当我点击li时，jQuery会捕获
的单击事件，而不是li的单击事件。有人能给我任何想法吗？
这是什么？aniadirFiltro();cargarFiltros(); - Alive to die - Anant
你需要将 click 事件作为函数的参数传递。该事件将具有 .target 属性，该属性将引用被点击的元素。使用 .closest() 从被点击的元素开始查找 li。请注意，.click() 仅是 .on('click') 的快捷方式。我建议您使用 .on()，以便更好地控制事件绑定。 - tao
请阅读“*[mcve]*”指南；我们无法看到未能正常工作的部分，因为我们无法看到您调用的函数和缺少的.campos-para-filtrar元素。 - David Thomas
3个回答
0

获取包含 li 元素的元素的引用，然后使用 find() 函数捕获所有的 li 元素。将 click() 函数绑定到每个元素上，并使用 this 关键字通过使用 attr 函数记录所点击元素的特定 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>

0

你的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);
    // ...
});

通过这种方式，您只需在父级上绑定一个点击事件，而不是每个子元素都要绑定。使用上述语法，您的单击事件也将适用于将来可能添加的任何li元素，使用$.ajax()。这是一种通用且稳健的结构，可适用于任何事件，而不仅限于click事件。
0
如果您需要一個不必使用 jQuery 的版本。
Array.prototype.slice.call(document.querySelectorAll('li'))
   .forEach(function(li){
      li.onclick = function(e){ 
         // onclick code here 
      }
   });
1
非常感谢。我试过了，它完美地工作了，但我更喜欢用jQuery来做。 - fcoserper
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接