divへの特定のliの選択

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">クリックしていないのliクリックをキャプチャします。

誰も私に何か考えてもらえますか？

Answer 1

あなたclickイベントは、最も可能性の高いliの子に発生します。最初にliを.closest()とする必要があります。私はまた、.click()の代わりに.on()を使用することをお勧め：

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

この方法であなただけの1回の親のクリックの代わりに、それぞれの子のための1つをバインドします。上記の構文を使用すると、後で追加する可能性のあるliも、$.ajax()を使用してクリックすることができます。 clickだけでなく、どのようなイベントでも動作する普遍的で堅牢な構造です。

Answer 2

li要素を含む要素への参照をキャッチし、次にfind()関数を使用して、すべてのli要素をキャッチします。それらのそれぞれにclick()をバインドし、機能を使用してクリックされた要素の特定のIDを記録するのにthisキーワードを使用します。

$('.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 3

あなたは

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