我在 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 单击。
谁能告诉我任何想法?
最佳答案
您的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
。
关于javascript - 选择特定的 li 到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42482333/