在div中选择特定的li

我在div中列出了一个列表，我想用jQuery捕获特定'li'上的点击事件。在div中选择特定的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>

我试图捕捉里点击使用：

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

但是当我做点击李，jQuery的捕捉<div class="lista-select lista-area">点击，而不是李点击。

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

来源

2017-02-27 fcoserper

'aniadirFiltro（）; cargarFiltros（）; “这是什么？ –

您需要传递'click'事件作为您的函数的参数。该事件将有一个'.target'属性，它将引用clicked元素。使用'.closest（）'从单击的元素开始查找'li'。请注意'.click（）'只是'.on（'click'）'的快捷方式。我建议你使用'.on（）'，这样你可以更好地控制你的事件绑定。 –

请仔细阅读“* [mcve] *”准则;我们看不到有什么不工作，因为我们看不到你正在调用的函数，而且我们缺少'.campos-para-filtrar'元素。 –

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

来源

2017-02-27 09:45:48

非常感谢。我尝试过，并且完美。 – fcoserper

捕获对包含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>

来源

2017-02-27 09:44:58

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

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

来源

2017-02-27 10:23:40 levi

非常感谢。我尝试过，并且完美，但我更喜欢用jQuery来做。 – fcoserper

在div中选择特定的li

回答

相关问题